javascript - 是否可以拦截/覆盖页面中的所有点击事件？

Question

我编写了一个应该在移动设备上运行的 html5 应用程序。 90% 的时间它工作正常，但在某些设备(主要是 android 4.0+)中，点击事件会触发两次。

我知道为什么会这样，我正在使用 iScroll 4模拟 native 滚动并处理滚动内部发生的事件。(如果您感兴趣，第 533 行会调度事件)大多数情况下它工作正常但在某些设备中，iScroll 调度事件和原始 onClick 事件都附加到元素被触发，所以点击发生了两次。我找不到在哪些设备上发生这种情况的模式，因此我正在寻找防止双击的替代方法。

我已经想出了一个解决问题的丑陋修复程序。我将所有点击都封装在一个“handleClick”方法中，该方法的运行时间不得超过 200 毫秒。这变得非常难以维护。如果我有动态生成的内容，它会变得一团糟，当我尝试将对象作为参数传递时，情况会变得更糟。

var preventClick = false;

function handleClick(myFunction){

   if (preventClick)
      return;
   setTimeout(function(){preventClick = true;},200);

   myFunction.call():
}

 function myFunction(){

  ...

 }

<div onclick='handleClick(myfunction)'> click me </div>

我一直在尝试找到一种方法来拦截整个页面中的所有点击事件，并以某种方式确定是否应该触发该事件。有可能做这样的事情吗？

在点击时设置 myFunction 但在它被调用之前，触发 handleClick()？我在玩 custom events目前，它看起来很有希望，但我不想更改整个应用程序中的每个事件。

<div onclick='myfunction()'> click me </div>

Answer 1

你可以用下面的方法来做到这一点(虽然我不推荐它):

$('body').on('click', function(event){
  event.preventDefault();
  // your code to handle the clicks
});

这将阻止浏览器中点击的默认功能，如果您想知道点击的目标，只需使用 event.target。 引用this回答有关如何在 preventDefault() 之前添加点击检查的想法；