移动的屏幕中touchstart/touchend与普通点击之间的jQuery冲突

qyyhg6bp 于 2023-06-22 发布在 jQuery

关注(0)|答案(1)|浏览(145)

图像上的单击正常未触发，我与移动终端Android中的touchstart/touchend命令发生冲突。
延迟功能是显示5秒后报警。但如果未达到5秒，请取消。
Touchstart启动功能和touchend清除setTimeout取消功能。
未激发正常的单击图像。
错误是什么？

let myTimeout;
var mousedownFired = false;
    
$(document).on("touchstart", "figure img", (e) => { // Start setTimeout with Delay
    e.preventDefault();
            
    mousedownFired = true;
      
      myTimeout = setTimeout(function() {
          console.log("PRESS WITH DELAY");
    }, 5000);
});
$(document).on("touchend", "figure img", (e) => { // Cancel setTimeout
    e.preventDefault();
  
    clearTimeout(myTimeout);
    console.log("STOPING!");
    //e.stoppropagation();
});
$(document).on("click", "figure img", (e) => {
    e.stopPropagation();
    e.preventDefault();
        
    if (mousedownFired) {
        mousedownFired = false;
        console.log("CLICK IMG NORMAL");
        return;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
  
  <figure>
  <img id="demo" src="https://picsum.photos/536/354" />
  </figure>
  
</section>

jquery

来源：https://stackoverflow.com/questions/76484857/jquery-conflict-between-touchstart-touchend-with-normal-click-in-mobile-screen

1条答案

按热度按时间

pnwntuvh1#

这就是Pointer Events的目的--为鼠标和触摸 * 指针 * 提供一个单一的代码库。

let myTimeout;

const handleDown = (evt) => {
  evt.preventDefault();
  console.log("PRESSED");
  myTimeout = setTimeout(function() {
    console.log("PRESSED WITH DELAY");
  }, 1000);
};

const handleUp = (evt) => {
  clearTimeout(myTimeout);
  console.log("STOPPED!");
};

$(document)
  .on("pointerdown", "figure img", handleDown)
  .on("pointerup", "figure img", handleUp);

<figure>
  <img src="https://picsum.photos/536/354" />
</figure>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

PS：
永远不要使用（除非用于调试目的）Event.stopPropagation（）。任何时候，应用（或第三方脚本）都应该能够注册其环境文档中发生的事件-没有例外，以便正确响应和操作。想象一下，例如一个脚本的模态，或自定义选择框，弹出窗口...如果您的脚本使用了stopPropagation（），则模态将无法按预期关闭。

赞(0）回复(0）举报 2023-06-22

我来回答

移动的屏幕中touchstart/touchend与普通点击之间的jQuery冲突

1条答案

相关问题

热门标签

最新问答