jQuery click函数在移动浏览器中失效，如何模拟点击触发事件？

嘿，我刚好碰到过类似的移动端模拟点击失效的问题，你的代码在桌面端能跑，但移动端不行的核心原因是：jQuery的.click()方法虽然能触发click事件，但移动端很多交互组件（比如图片集）可能依赖原生触摸事件（touchstart/touchend），或者浏览器对“非用户触发”的模拟点击有安全限制，导致单纯调用.click()没效果。

下面给你两种可行的方案，都是直接模拟真实的事件流程，而不是绑定新的处理程序：

方案一：模拟原生click事件（最通用） #

用原生JavaScript创建并触发标准的click事件，比jQuery的.click()更贴近浏览器原生行为，兼容性更好：

jQuery(".button-class").on('click touchstart', function(){
  // 获取图片集元素
  const galleryElement = document.querySelector(".gallery-with-images-class");
  // 创建符合标准的click事件
  const nativeClickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  // 触发事件
  galleryElement.dispatchEvent(nativeClickEvent);
});

这里给按钮同时绑定了click和touchstart事件，确保在移动端和桌面端都能触发，然后用dispatchEvent触发图片集的原生点击事件，比直接调用jQuery的.click()更可靠。

方案二：模拟完整触摸流程（针对依赖触摸事件的组件） #

如果你的图片集组件是基于touchstart/touchend事件实现的，那可以模拟完整的触摸流程，再配合click事件兜底：

jQuery(".button-class").on('click touchstart', function(){
  const galleryElement = document.querySelector(".gallery-with-images-class");
  
  // 模拟touchstart事件
  const touchStart = new TouchEvent('touchstart', {
    bubbles: true,
    cancelable: true,
    touches: [new Touch({
      identifier: Date.now(),
      target: galleryElement,
      clientX: 10,
      clientY: 10
    })]
  });
  galleryElement.dispatchEvent(touchStart);
  
  // 模拟touchend事件
  const touchEnd = new TouchEvent('touchend', {
    bubbles: true,
    cancelable: true,
    changedTouches: [new Touch({
      identifier: Date.now(),
      target: galleryElement,
      clientX: 10,
      clientY: 10
    })]
  });
  galleryElement.dispatchEvent(touchEnd);
  
  // 额外触发click事件，兼容桌面端和部分只监听click的组件
  galleryElement.dispatchEvent(new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  }));
});

这个方案模拟了用户真实的触摸操作，能触发那些依赖触摸事件的组件逻辑，同时保留click事件兜底，确保全场景兼容。

为什么你的原代码不行？ #

jQuery的.click()本质上是触发了元素的click事件，但移动端的浏览器为了防止恶意脚本自动触发交互，会对非用户直接触发的click事件有一定限制；另外很多图片库会优先监听触摸事件来优化移动端体验，所以单纯触发click事件无法触发它们的逻辑。

内容的提问来源于stack exchange，提问作者JoeBulkowski