javascript IE 的原型 Event.StopPropagation >= 8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17102300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prototype Event.StopPropagation for IE >= 8
提问by ryandlf
I understand the proper way to handle event.stopPropagation for IE is
我了解处理 IE 的 event.stopPropagation 的正确方法是
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.returnValue = false;
}
But is it possible to prototype Event so that I don't have to do the check each and everytime I use stopPropagation?
但是是否可以对 Event 进行原型设计，这样我就不必每次使用 stopPropagation 时都进行检查？
This question seemed helpful: JavaScript Event prototype in IE8however I don't quite understand the accepted answer and how it is a prototype that can essentially be set and forget.
这个问题似乎很有帮助：IE8 中的 JavaScript 事件原型但是我不太明白接受的答案以及它如何是一个基本上可以设置和忘记的原型。
回答by mishik
Probably this:
大概是这样的：
Event = Event || window.Event;
Event.prototype.stopPropagation = Event.prototype.stopPropagation || function() {
this.cancelBubble = true;
}
returnValue = falseis an analogue for preventDefault:
returnValue = false是 preventDefault 的类似物：
Event.prototype.preventDefault = Event.prototype.preventDefault || function () {
this.returnValue = false;
}
回答by jfriend00
If you're doing your own event handling in plain javascript, then you probably already have a cross browser routine for setting event handlers. You can put the abstraction in that function. Here's one that I use that mimics the jQuery functionality (if the event handler returns false, then both stopPropagation()and preventDefault()are triggered. You can obviously modify it however you want it to behave:
如果您正在使用纯 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);
}
}
Or, you can just make a utility function like this:
或者，您可以像这样创建一个实用程序函数：
function stopPropagation(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.returnValue = false;
}
}
And just call that function instead of operating on the event in each function.
只需调用该函数，而不是对每个函数中的事件进行操作。
回答by ImamJaferAli
We can use this alone: event.cancelBubble = true.
我们可以单独使用它：event.cancelBubble = true.
Tested working in all browsers.
测试在所有浏览器中工作。
