移动端document.querySelector绑定touchend事件不生效问题求助

问题修复方案 #

导致移动端事件不生效的核心原因和修复方法如下：

• 原因1：JS执行时DOM未完全加载，querySelector获取不到.search-form元素，事件绑定失败。桌面端加载速度快可能偶现生效，移动端加载延迟会稳定触发该问题。
• 原因2：直接绑定touchend到form节点，容易被子元素的触摸事件拦截冒泡，导致回调不触发，且touchend无法覆盖回车提交的场景。
• 原因3：部分移动端Safari要求绑定触摸事件的元素有cursor:pointer样式，否则不会触发触摸回调。

最终实现代码

优先绑定form原生submit事件，覆盖所有提交场景，同时兼容PC和移动端：

document.addEventListener('DOMContentLoaded', function() {
  const searchForm = document.querySelector('.search-form');
  // 元素不存在直接退出，避免报错
  if (!searchForm) return;

  // 绑定submit事件，同时覆盖点击提交、回车提交、移动端触摸提交所有场景
  searchForm.addEventListener('submit', function(e) {
    // 拦截默认的表单提交行为
    e.preventDefault();
    // 获取输入框关键词
    const searchKeyword = this.querySelector('.search-field').value.trim();
    if (!searchKeyword) return;

    // 替换为你的目标跳转地址，按业务要求拼接参数即可
    const targetUrl = `https://你的自定义跳转域名.com/目标路径?query=${encodeURIComponent(searchKeyword)}`;
    window.location.href = targetUrl;
  });

  // 如果确实需要单独监听输入框的触摸事件，直接绑定到输入框元素，避免冒泡问题
  const searchInput = searchForm.querySelector('.search-field');
  if (searchInput) {
    // 补充cursor:pointer样式，兼容低版本Safari
    searchInput.style.cursor = 'pointer';
    searchInput.addEventListener('touchend', function() {
      // 这里写你需要的触摸触发逻辑
      console.log('搜索框被触摸');
    }, { passive: true });
  }
});

可选优化项

如果你的业务不需要单独监听输入框的触摸事件，可以删除上面代码中searchInput相关的绑定逻辑，仅保留submit事件绑定即可满足需求，稳定性更高。

内容的提问来源于stack exchange，提问作者T.H.