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

Question

如果其他事件处理程序附加到 IE8 中的同一元素，我如何停止执行 使用纯 javascript 的其他事件处理程序？

我可以用 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