Question

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

我知道为什么会发生这种情况，我使用iScroll 4来模拟本地滚动，它会处理滚动内发生的事件。（如果你感兴趣，第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。有关如何在preventDefault（）之前添加点击检查的想法，请参阅this答案。

Answer 2

我不喜欢属性上的事件，但那只是我。

思考jquery：$(selector).click(function(){ <your handler code> }你可以做类似的事情：

$(selector).click(function(event){
    handleClick(window[$(this).attr("onclick")]);
};

当然，没有任何参数...

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

2 个答案: