关于事件对象中的stopImmediatePropagation

关于e.stopPropagation()，大家应该知道这个方法是用来阻止事件冒泡的。

那么e.stopImmediatePropagation()可能比较少见。

stopImmediatePropagation

1. 用来阻止在同一DOM对象上同一事件类型的其它事件函数的执行
2. 并且与事件先后注册的顺序有关

感觉晦涩难懂？

---

我举个简单的例子

我在document身上注册同类型click的两个事件

document.addEventListener("click",e=>{
    console.log("click",1);
})

document.addEventListener("click",e=>{
    console.log("click",2);
})

正常就应该是这样，如果你用document.onclick那么我应该不用解释吧。

加上e.stopImmediatePropagation();

document.addEventListener("click",e=>{
    e.stopImmediatePropagation();
    console.log("click",1);
})

document.addEventListener("click",e=>{
    console.log("click",2);
})

但阻止的是在其之后注册事件

document.addEventListener("click",e=>{
    console.log("click",1);
})

document.addEventListener("click",e=>{
    e.stopImmediatePropagation();
    console.log("click",2);
})

这里两个事件都触发了。

---

并且不同类型之间的事件不相影响

document.addEventListener("click",e=>{
    e.stopImmediatePropagation();
    console.log("click",1);
})

document.addEventListener("click",e=>{
    console.log("click",2);
})

document.addEventListener("mousemove",e=>{
    e.stopImmediatePropagation();
    console.log("move",3);
})
document.addEventListener("mousemove",e=>{
    console.log("move",4);
})

mousemove正常触发，不受click事件的影响。但第三个事件阻止同类型的第四个事件的触发