js中stopPropagation()和stopImmediatePropagtion()函数到底有什么用？它们之间有什么区别呢？

我们在触发一个对象的事件监听时不想触发其父级的同类型事件监听，也就是对子级点击(onclick)的时候不想触发父级的点击事件，只触发子级的点击事件，这时候我们的这个函数就排上用场了，它可以防止冒泡事件的产生，即点击当前的子级时，它的触发域只有自己本身，不会涉及到其父级。

比如这时候我们给 inner 添加一个stopPropagtion()或者stopImmediatePropagation()，就会消除它产生的冒泡事件，但是并不会消除 outter 到 document 的冒泡事件，点击效果如图三、图四所示。

代码如下：

<style>
* {
    margin: 0px;
    padding: 0px;
}
#outter {
    width: 300px;
    height: 300px;
    background-color: red;
}
#inner {
    width: 150px;
    height: 150px;
    background-color: skyblue;
}
#neighbour {
    width: 150px;
    height: 150px;
    background-color: lightgreen;
    position: absolute;
    top: 150px;
    left: 150px;
    /* 给 neighbour 添加定位，使其也在 outter 的内部 */
}
</style>
<div id="outter">
  <div id="inner"></div>
</div>
<!-- 这里虽然 neighbour 不是 outter 的子级，但是通过 css 可以将其定位到 outter 的内部 -->
<div id="neighbour"></div>

// 给 inner 添加点击事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！");
            
    //防止 inner 的冒泡事件，阻止其父级触发相同类型的事件
    event.stopPropagation(); 
});

点击 inner 触发的：

点击 outter 且非 inner、非 neighbour 的区域：

因为只限制了 inner 的冒泡事件，这还不足够，所以我们在编码时候，应为所有到非 documen 的标签对象的事件触发添加一个 stopPropagation 函数，这样就可以成功的防止冒泡事件对代码结果的影响了。

// 给 document 添加点击事件
document.addEventListener("click", (event)=>{
    console.log("document 点击事件被触发！！");
    // document 不需要添加防止冒泡事件触发的函数
});

// 给 outter 添加点击事件
outter.addEventListener("click",(event)=>{
    console.log("outter 点击事件被触发！！");
            
    // 防止 outter 的冒泡事件，阻止其父级触发相同类型的事件
    event.stopPropagation();
});
        
// 给 inner 添加点击事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！");
            
    // 防止 inner 的冒泡事件，阻止其父级触发相同类型的事件
    event.stopPropagation();
});
        
// 给 neighbour 添加点击事件
neighbour.addEventListener("click",(event)=>{
    console.log("neighbour 点击事件被触发！！");
            
    // 防止 neighbour 的冒泡事件，阻止其父级触发相同类型的事件
    event.stopPropagation();
});

区别

区别：stopImmediatePropagtion()函数在使用上比 stopPropagtion()函数更为严格，后者 stopPropagtion 只限制了父级的冒泡触发，而前者stopImmediatePropagtion()不仅限制了父级的同类型事件冒泡触发还限制了自己的同类型事件冒泡触发，因为在 DOM（document object module）中一个对象可以添加多个同类型的事件监听，称为 DOM 二级事件监听，也就是说一个对象可以添加多个 onclick 事件。

// 给 inner 添加点击事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第一个！！！");
    event.stopPropagation();
});
// DOM 二级事件监听，给 inner 添加多个 onclick 事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第二个！！！");
    event.stopPropagation();
}); 
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第三个！！！");
    event.stopPropagation();
});

虽然这时候我们对 inner 添加了stopPropagation()函数来防止冒泡事件对其父级的同类型(onclick)事件触发。但是这时候我们点击 inner 会触发它的三个 onclick 事件。如图所示：

这里就可以体现出stopImmediatePropagation()函数的区别了，这时候若我们给第一个事件（符合代码的顺序执行逻辑，先写的为第一个）添加stopImmediatePropagation()而其他不加，这时候再点击 inner，后面的两个点击事件(onclick)就不会触发。

具体代码：

// 给 inner 添加点击事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第一个！！！");
            
    //只对第一个事件添加 stopImmediatePropagation()
    event.stopImmediatePropagation();
});
// DOM 二级事件监听，给 inner 添加多个 onclick 事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第二个！！！");
    // event.stopPropagation();
}); 
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第三个！！！");
    // event.stopPropagation();
});

如下图所示：

细节点评：多个 onclick 事件只需要其中有一个添加了stopPropagtion()或者stopImmediatePropagtion()就可以阻止父级的同类型事件冒泡触发。

可以看见这时候后面两个事件将不会触发，这就是stopImmediatePropagation()函数的使用。与 stopPropagtion 对父级同类型冒泡事件触发防止操作的类比，这时候若对第二个事件添加stopImmediatePropation()则第三个事件不会触发，而第一个事件依旧会触发。

代码如下：

// 给 inner 添加点击事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第一个！！！");
    // event.stopImmediatePropagation();
});
// DOM 二级事件监听，给 inner 添加多个 onclick 事件
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第二个！！！");
    //只对第二个事件添加 stopImmediatePropagation()
    event.stopImmediatePropagation();
}); 
inner.addEventListener("click",(event)=>{
    console.log("inner 点击事件被触发！！，这是第三个！！！");
    // event.stopPropagation();
});

如图所示：

综上所述，若我们防止一个标签本身同类事件的某一个事件后续的同类型事件的冒泡触发，就可以在当前事件加上stopImmediatePropagation()函数，就像这里演示的一样。

• 若只想触发 inner 的第一个 onclick 事件，只需在第一个事件添加stopImmediatePropagation()函数。
• 若不想触发 inner 第 n 个 onclick 事件后的 onclick 事件，只需在这个第 n 个 onclick 事件添加stopImmediatePropagation()函数即可。

以上关于js中stopPropagation()和stopImmediatePropagtion()函数到底有什么用？它们之间有什么区别呢？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。