Question

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

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

但是有可能对事件进行原型设计，以便每次使用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

我们可以单独使用它：{{1}}。

经测试可在所有浏览器中使用。

IE的原型Event.StopPropagation＆gt; = 8

3 个答案: