javascript 是否可以拦截/覆盖页面中的所有点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19449454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to intercept/override all click events in the page?
提问by caiocpricci2
I've written an html5 application which is supposed to work on mobile devices. 90% of the time it works fine however in certain devices (mostly androids 4.0+) the click events fire twice.
我编写了一个 html5 应用程序，它应该可以在移动设备上运行。90% 的时间它都可以正常工作，但是在某些设备（主要是 androids 4.0+）中，点击事件会触发两次。
I know why that happens, I'm using iScroll 4to 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.
我知道为什么会发生这种情况，我正在使用iScroll 4来模拟本机滚动，它会处理滚动内发生的事件。（如果您感兴趣，第 533 行会调度事件）大多数时间它都可以正常工作，但在某些设备中iScroll 调度事件和附加到元素的原始 onClick 事件都被触发，因此单击发生两次。我找不到发生这种情况的设备的模式，所以我正在寻找替代方法来防止双击。
I already came up with an ugly fix that solves the problem. I've wrapped all the clicks in a "handleClick" method, that is not allowed to run more often than 200ms. That became really tough to maintain. If I have dynamically generated content it becomes a huge mess and it gets worse when I try to pass objects as parameters.
我已经想出了一个解决问题的丑陋修复方法。我已将所有点击都封装在一个“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>
I've been trying to find a way to intercept all click events in the whole page, and there somehow work out if the event should be fired or not. Is it possible to do something like that?
我一直试图找到一种方法来拦截整个页面中的所有点击事件，并且以某种方式确定是否应该触发该事件。有可能做这样的事情吗？
Set myFunction on click but before it's called, trigger handleClick()? I'm playing with custom eventsat the moment, it's looking promising but I'd like to not have to change every event in the whole application.
在单击时设置 myFunction 但在调用之前，触发handleClick()? 我目前正在处理自定义事件，看起来很有希望，但我不想更改整个应用程序中的每个事件。
<div onclick='myfunction()'> click me </div>
回答by Patsy Issa
You can do that with the following ( i wouldn't recommend it though):
您可以通过以下方式做到这一点（不过我不建议这样做）：
$('body').on('click', function(event){
event.preventDefault();
// your code to handle the clicks
});
This will prevent the default functionality of clicks in your browser, if you want to know the target of the click just use event.target.
Refer to thisanswer for an idea on how to add a click check before the preventDefault();
这将阻止浏览器中点击的默认功能，如果您想知道点击的目标，只需使用event.target. 有关如何在 preventDefault(); 之前添加点击检查的想法，请参阅此答案；
回答by SparK
I don't like events on attributes, but that's just me.
Thinking jquery: $(selector).click(function(){ <your handler code> }you could do something like:
我不喜欢属性上的事件，但这只是我。
思考 jquery：$(selector).click(function(){ <your handler code> }你可以这样做：
$(selector).click(function(event){
handleClick(window[$(this).attr("onclick")]);
};
of course, there wouldn't be any parameters...
当然，不会有任何参数...
