Arj*_*jun 285 javascript jquery
event.stopPropagation()和之间有什么区别event.stopImmediatePropagation()？
Dav*_*ave 296
stopPropagation将防止任何父被执行的处理程序stopImmediatePropagation将防止任何父处理程序,并且还任何其他处理程序从执行
jquery文档中的快速示例:
$("p").click(function(event) {
event.stopImmediatePropagation();
});
$("p").click(function(event) {
// This function won't be executed
$(this).css("background-color", "#f00");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>example</p>请注意,事件绑定的顺序在这里很重要!
$("p").click(function(event) {
// This function will now trigger
$(this).css("background-color", "#f00");
});
$("p").click(function(event) {
event.stopImmediatePropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>example</p>Anu*_*rag 57
一个小例子来演示这些传播停止是如何工作的.
var state = {
stopPropagation: false,
stopImmediatePropagation: false
};
function handlePropagation(event) {
if (state.stopPropagation) {
event.stopPropagation();
}
if (state.stopImmediatePropagation) {
event.stopImmediatePropagation();
}
}
$("#child").click(function(e) {
handlePropagation(e);
console.log("First event handler on #child");
});
$("#child").click(function(e) {
handlePropagation(e);
console.log("Second event handler on #child");
});
// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
handlePropagation(e);
console.log("Event handler on div: #" + this.id);
});
// Enable/disable propogation
$("button").click(function() {
var objectId = this.id;
$(this).toggleClass('active');
state[objectId] = $(this).hasClass('active');
console.log('---------------------');
});div {
padding: 1em;
}
#parent {
background-color: #CCC;
}
#child {
background-color: #000;
padding: 5em;
}
button {
padding: 1em;
font-size: 1em;
}
.active {
background-color: green;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"> </div>
</div>
<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>绑定了三个事件处理程序.如果我们不停止任何传播,那么应该有四个警报 - 在子div上有三个,在父div上有一个.
如果我们阻止事件传播,那么将有3个警报(全部在内部子div上).由于事件不会传播到DOM层次结构中,因此父div不会看到它,并且它的处理程序不会触发.
如果我们立即停止传播,那么只会有1个警报.即使有三个事件处理程序附加到内部子div,也只执行1个,并且即使在同一个元素内也会立即杀死任何进一步的传播.
Rob*_*mer 37
令人惊讶的是，所有其他答案只说了一半的事实或实际上是错误的！
e.stopImmediatePropagation() 停止为此事件调用任何进一步的处理程序，没有例外e.stopPropagation()是相似的，但确实还呼吁所有的处理程序这一阶段对这个元素如果不是已经叫什么阶段？
例如，一个点击事件总是首先沿着 DOM 向下（称为“捕获阶段”），最后到达事件的起点（“目标阶段”），然后再次冒泡（“冒泡阶段”）。并且addEventListener()您可以独立地为捕获和冒泡阶段注册多个处理程序。（目标阶段在不区分的情况下调用目标上的两种类型的处理程序。）
这就是其他答案不正确的地方：
Aro*_*eel 27
来自jQuery API:
除了保持元素上的任何其他处理程序不被执行之外,此方法还通过隐式调用event.stopPropagation()来停止冒泡.要简单地阻止事件冒泡到祖先元素但允许其他事件处理程序在同一元素上执行,我们可以使用event.stopPropagation()代替.
使用event.isImmediatePropagationStopped()来了解是否曾调用此方法(在该事件对象上).
简而言之:event.stopPropagation()允许执行同一元素上的其他处理程序,同时event.stopImmediatePropagation()防止每个事件运行.
SLa*_*aks 23
event.stopPropagation将阻止父元素上的处理程序运行.
调用event.stopImmediatePropagation还将阻止同一元素上的其他处理程序运行.
nop*_*ole 16
我是后来者,但也许我可以用一个具体的例子说这个:
说,如果你有<table>,有<tr>,然后<td>.现在,假设你为<td>元素设置了3个事件处理程序,然后如果你event.stopPropagation()在你设置的第一个事件处理程序中执行<td>,那么所有事件处理程序<td>仍将运行,但事件不会传播到<tr>或<table>(并且不会上去达<body>,<html>,document,和window).
但是现在,如果你使用event.stopImmediatePropagation()你的第一个事件处理程序,那么,对于其他两个事件处理程序<td>将不会运行,并且不会传播到<tr>,<table>(并不会上去达<body>,<html>,document,和window).
请注意,它不只是为了<td>.对于其他元素,它将遵循相同的原则.
这是一个演示来说明差异：
document.querySelectorAll("button")[0].addEventListener('click', e=>{
e.stopPropagation();
alert(1);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
e.stopImmediatePropagation();
alert(1);
});
document.querySelectorAll("button")[0].addEventListener('click', e=>{
alert(2);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
alert(2);
});<div onclick="alert(3)">
<button>1...2</button>
<button>1</button>
</div>请注意，您可以将多个事件处理程序附加到元素上的一个事件。
| 归档时间： |
|
| 查看次数： |
93152 次 |
| 最近记录： |