Запись события jQuery

Мне нужно захватить событие, а не позволить ему пузыриться. Это то, что я хочу:

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

Из этого примера кода у меня есть событие click, ограниченное div и телом. Я хочу, чтобы событие тела было вызвано первым. Как мне это сделать?

Ответ 1

Вместо этого используйте захват событий: -

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

Проверить последний аргумент на "addEventListener" по умолчанию, он является ложным и находится в режиме барботажа событий. Если установлено значение 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 и ранее по умолчанию используют событие bubbling. Поэтому я привязал событие к документу вместо тела, поэтому вам нужно использовать объект события для получения целевого объекта. Для IE вам нужно быть очень сложным.

Ответ 2

Я бы сделал это вот так:

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

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

Ответ 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;