18

我需要捕获一个事件而不是让它冒泡。这就是我要的：

<body>
   <div>
   </div>
</body>

从这个示例代码中，我在 div 和 body 上有了一个 click 事件。我希望首先调用 body 事件。我该怎么做？

4

3 回答 3

40

改用事件捕获：-

$("body").get(0).addEventListener("click", function(){}, true);

检查“addEventListener”的最后一个参数，默认情况下它是 false 并且处于事件冒泡模式。如果设置为 true 将用作捕获事件。

用于跨浏览器实现。

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 和之前的默认使用事件冒泡。所以我将事件附加在文档而不是正文上，因此您需要使用事件对象来获取目标对象。对于 IE，你需要非常棘手。

于 2013-06-22T09:25:09.810 回答
3

我会这样做：

$("body").click(function (event) {
  // Do body action

  var target = $(event.target);
  if (target.is($("#myDiv"))) {
    // Do div action
  }
});
于 2013-06-22T10:04:39.283 回答
1

比@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);
    }
}

然后使用：

shield_handler = global_handler("click", function(ev) {
    console.log("poof")
})

// disable
global_handler_off("click", shield_handler)
shield_handler = null;
于 2014-04-19T00:41:26.783 回答