javascript - IE 的原型 Event.StopPropagation >= 8

Question

我了解为 IE 处理 event.stopPropagation 的正确方法是

if(event.stopPropagation) {
    event.stopPropagation();
} else {
    event.returnValue = false;
}

但是是否可以对 Event 进行原型设计，这样我就不必每次使用 stopPropagation 时都进行检查？

这个问题似乎很有帮助：JavaScript Event prototype in IE8但是我不太理解接受的答案以及它是如何成为一个基本上可以设置和忘记的原型。

Answer 1

大概是这样的：

Event = Event || window.Event;
Event.prototype.stopPropagation = Event.prototype.stopPropagation || function() {
    this.cancelBubble = true;
}

returnValue = false是 preventDefault 的类似物：

Event.prototype.preventDefault = Event.prototype.preventDefault || function () {
    this.returnValue = false;
}

Answer 2

如果您使用纯 javascript 进行自己的事件处理，那么您可能已经有一个用于设置事件处理程序的跨浏览器例程。您可以将抽象放在该函数中。这是我使用的一个模仿 jQuery 功能的函数（如果事件处理程序返回false，则两者都stopPropagation()被preventDefault()触发。您显然可以修改它，但是您希望它的行为：

// refined add event cross browser
function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);   
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

或者，您可以像这样创建一个实用函数：

function stopPropagation(e) {
    if(e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.returnValue = false;
    }    
}

并且只需调用该函数而不是对每个函数中的事件进行操作。

Answer 3

我们可以单独使用它：event.cancelBubble = true.

经测试可在所有浏览器中运行。