Question

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

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

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

Answer 1

改为使用事件捕获： -

$("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，你需要非常棘手。

Answer 2

我会这样做：

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

  var target = $(event.target);
  if (target.is($("#myDiv"))) {
    // Do div action
  }
});

Answer 3

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

事件捕获jQuery

3 个答案: