移动触发两个“点击”事件

Question

我正在开发一个相当大的网络应用程序，我的一些点击处理程序正在移动设备上注册两次点击。请注意，这些都是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;
});

我无法在沙盒或小提琴中隔离和重现问题，这意味着我的代码中的其他地方可能存在问题。

但是，我已经设法解决了问题，因为我注意到在触发的两个事件之一中 view 属性为空：

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,
   ...
}

有谁知道导致第二次点击事件的原因以及为什么 view 属性在第一个事件中为空？

Answer 1

您很可能正在 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