使用jQuery click()触发元素点击事件时出现延迟的问题求助

以下是几个针对你遇到的延迟问题的可行解决方案：

• 改用原生DOM事件触发
  jQuery的.click()方法内部会做额外的事件处理逻辑，可能是导致延迟的原因。直接使用原生的dispatchEvent模拟真实点击事件，更贴近用户真实交互的行为：

  $('.double-subscription-option-column .new-product-atc').on('click', function(){
      const realAddToCartBtn = document.querySelector('.button--add-to-cart');
      if (realAddToCartBtn) {
          // 模拟带冒泡的鼠标点击事件
          const clickEvent = new MouseEvent('click', {
              bubbles: true,
              cancelable: true,
              view: window
          });
          realAddToCartBtn.dispatchEvent(clickEvent);
      }
  });
  

• 模拟完整的鼠标交互流程
  部分电商主题的加购逻辑会依赖完整的鼠标事件序列（mousedown → mouseup → click），仅触发click可能会被拦截或延迟处理。尝试模拟完整的交互链：

  $('.double-subscription-option-column .new-product-atc').on('click', function(){
      const $realBtn = $('.button--add-to-cart');
      $realBtn.trigger('mousedown');
      // 加10ms微小延迟模拟真实鼠标按下到松开的间隔
      setTimeout(() => {
          $realBtn.trigger('mouseup').trigger('click');
      }, 10);
  });
  

• 直接调用加购逻辑函数
  如果你的网站是基于Shopify这类电商平台，通常加购按钮的点击逻辑会绑定到一个全局函数（比如addToCart）。可以跳过触发按钮点击，直接调用这个核心函数，避免事件触发的额外开销。

• 临时解除隐藏状态再触发
  部分浏览器对隐藏元素的事件触发可能有隐性限制，尝试短暂显示按钮后再触发点击，完成后重新隐藏：

  $('.double-subscription-option-column .new-product-atc').on('click', function(){
      const $realBtn = $('.button--add-to-cart');
      // 临时显示按钮
      const originalDisplay = $realBtn.css('display');
      $realBtn.css('display', 'block');
      // 用setTimeout让浏览器渲染更新后再触发
      setTimeout(() => {
          $realBtn.click();
          $realBtn.css('display', originalDisplay);
      }, 0);
  });
  

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