移动触发二'单击'事件

Mobile triggering two 'click' events

本文关键字：单击 事件 移动      更新时间：2023-09-26

我正在开发一个相当大的web应用程序，我的一些点击处理程序正在移动设备上注册两次点击。注意，这都是click事件，而不是click和touchstart的情况。。。。

$("#myDiv").on('click', function(e){
    console.log(e); // logs two click events despite code below
    e.stopPropagation();
    e.stopImmediatePropagation();
    e.preventDefault();
    return false;
});

我无法在沙盒或fiddle中隔离和复制问题，这意味着我的代码中可能存在其他地方的问题。

然而，我已经找到了一个解决方法，因为我注意到在触发的两个事件之一中，视图属性为空：

event(1){
   altKey:false,
   bubbles:true,
   button:0,
   ...
   ...
   type: "click",
   view: null,          //  <------this is null for some reason
   ...
}
event(2){
   altKey:false,
   bubbles:true,
   button:0,
   ...
   ...
   type: "click",
   view: Window,
   ...
}

有人知道是什么导致了第二次点击事件吗？为什么视图属性在第一次事件中为null？

很可能您正在iOS设备上进行测试。在ios设备中，第一次触摸被视为hover事件，第二次触摸被处理为touch，这就是为什么会出现这种行为。我也因此而痛苦。为了解决这个问题，我删除了所有悬停css并编写了这个jquery。

       <script>$('a').on('click touchend', function(e) {
                      var el = $(this);
                      var link = el.attr('href');
                      window.location = link;
                      });</script>
    <script>$('button').on('click touchend', function(e) {
                      var el = $(this);
                      var link = el.attr('href');
                      window.location = link;
                      });</script>

我不认为这是最好的解决方案，但它是有效的。只有我必须在没有悬停的情况下工作。

如果你找到其他解决方案，请告诉我。这是我的问题链接：

MyQuestion

相关文章：