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

Question

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

I know why that happens, I'm using iScroll 4 to simulate native scrolling and it handles the events that happen inside the scroll.(line 533 dispatches the event if you're interested) Most of the time it works fine but in certain devices both the iScroll dispatched event and the original onClick event attached to the element are fired, so the click happens twice. I can't find a pattern on which devices this happen so I'm looking for alternatives to prevent double clicks.

我已经想出了解决问题的丑陋修复方法.我已将所有点击包装在"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()？我现在正在玩自定义事件,它看起来很有前途,但我不想改变整个应用程序中的每个事件.

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

Answer 1

您可以使用以下内容执行此操作(我不建议这样做):

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

如果您想知道刚刚使用的点击目标,这将阻止浏览器中的点击默认功能event.target.有关如何在preventDefault()之前添加点击检查的想法,请参阅此答案;