当 eventListener 附加到 IE 8 中的相同元素时如何停止事件传播？

Question

如何停止执行其他事件处理程序 纯 javascript 以防它们附加到 IE8 中的同一元素？

我可以用 Event.stopImmediatePropagation 方法停止事件传播，但是 IE8 不支持它。

// document.getElementById('my-elem').attachEvent('click', firstHandler); 
document.getElementById('my-elem').addEventListener('click', firstHandler);
// document.getElementById('my-elem').attachEvent('click', secondHandler); 
document.getElementById('my-elem').addEventListener('click', secondHandler);


function firstHandler(ev){
  ev.stopPropagation();
  alert('1');
}

function secondHandler(ev){
  ev.stopPropagation();
  alert('2');
}

<div id="my-elem">
  How to stop propagation ?
</div>

Answer 1

一个非常简化的（并且可能容易出错）polyfill/shim。捕获原始 attachEvent/detachEvent 方法，并创建新的方法来检查标志。

此外，它只会阻止在调用 stopImmediatePropagation 之前附加的事件。

if (!Event.prototype.stopImmediatePropagation) {
  (function() {
    var attachEvent = Element.prototype.attachEvent,
        detachEvent = Element.prototype.detachEvent;

    Element.prototype.attachEvent = function(type, callback) {
      attachEvent.call(this, "on"+type, function(event) {
        if (!event.immediatePropagationStopped) {
          callback(event);
        }
      });
    };

    Element.prototype.detachEvent = function(type, callback) {
      detachEvent.call(this, type, callback);
    };
  }());

  Event.prototype.stopImmediatePropagation = function() {
    this.immediatePropagationStopped = true;
  };
}

document.getElementById("test").attachEvent("click",function(e){
  console.log("hi");
});
document.getElementById("test").attachEvent("click",function(e){
  e.stopImmediatePropagation();
  console.log("hi2");
});
document.getElementById("test").attachEvent("click",function(e){
  console.log("hi3");
});

<div id="test">Click me</div>

虽然这在我的 IE 11 浏览器的 IE 8 仿真模式下确实有效，但正如我之前提到的，这是简化的。所以它不会做太多的错误检查和其他需要的检查。如果您想要生产可用代码，请为 add/removeEventListener、preventDefault、stopPropagation、stopImmediatePropagation 找到合适的 polyfill。

Modernizr 将 ES5 DOM SHIM 列为具有 stopImmediatePropagation 的 polyfill，因此它可能具有其他的 polyfill

当 eventListener 附加到 IE 8 中的相同元素时如何停止事件传播？

How to stop event propagation when eventListener attached to same elements in IE 8?

javascript

events

stoppropagation