事件捕获 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17249125/
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
Event capturing jQuery
提问by Toosick
I need to capture an event instead of letting it bubble. This is what I want:
我需要捕获一个事件而不是让它冒泡。这就是我要的：
<body>
<div>
</div>
</body>
From this sample code I have a click event bounded on the div and the body. I want the body event to be called first. How do I go about this?
在这个示例代码中，我有一个以 div 和 body 为界的点击事件。我希望首先调用 body 事件。我该怎么做？
回答by pvnarula
Use event capturing instead:-
改用事件捕获：-
$("body").get(0).addEventListener("click", function(){}, true);
Check the last argument to "addEventListener" by default it is false and is in event bubbling mode. If set to true will work as capturing event.
检查“addEventListener”的最后一个参数默认情况下它是假的并且处于事件冒泡模式。如果设置为 true 将用作捕获事件。
For cross browser implementation.
用于跨浏览器实现。
var bodyEle = $("body").get(0);
if(bodyEle.addEventListener){
bodyEle.addEventListener("click", function(){}, true);
}else if(bodyEle.attachEvent){
document.attachEvent("onclick", function(){
var event = window.event;
});
}
IE8 and prior by default use event bubbling. So I attached the event on document instead of body, so you need to use event object to get the target object. For IE you need to be very tricky.
IE8 和之前的默认情况下使用事件冒泡。所以我将事件附加在文档而不是正文上，因此您需要使用事件对象来获取目标对象。对于 IE，您需要非常棘手。
回答by Jonathan
I'd do it like this:
我会这样做：
$("body").click(function (event) {
// Do body action
var target = $(event.target);
if (target.is($("#myDiv"))) {
// Do div action
}
});
回答by Jordan Weitz
More generally than @pvnarula's answer:
比@pvnarula 的回答更普遍：
var global_handler = function(name, handler) {
var bodyEle = $("body").get(0);
if(bodyEle.addEventListener) {
bodyEle.addEventListener(name, handler, true);
} else if(bodyEle.attachEvent) {
handler = function(){
var event = window.event;
handler(event)
};
document.attachEvent("on" + name, handler)
}
return handler
}
var global_handler_off = function(name, handler) {
var bodyEle = $("body").get(0);
if(bodyEle.removeEventListener) {
bodyEle.removeEventListener(name, handler, true);
} else if(bodyEle.detachEvent) {
document.detachEvent("on" + name, handler);
}
}
Then to use:
然后使用：
shield_handler = global_handler("click", function(ev) {
console.log("poof")
})
// disable
global_handler_off("click", shield_handler)
shield_handler = null;
