js中阻止事件冒泡的两种方法

如何阻止 js 的事件冒泡？常见的有两种方法：调用 event.stopPropagation() 或者在事件回调中 return false。

两种方法有什么区别呢？

简单说就是：returen false = event.stopPropagation + event.preventDefault。也就是说，return false 不光阻止了事件冒泡，还阻止了默认事件。

举例说明：

<div id="pop-div">
    <a id="click-a" target="_blank" href="https://www.zhuige.com">点这里</a>
</div>

$('#pop-div').click(e => {
    console.log('接收到 a 标签上的点击事件')
})

只在 pop-div 上绑定 click 事件，点击 click-a 的时候，会跳转到追格官网，并且会在命令行打印：接收到 a 标签上的点击事件

一、在 click-a 上绑定 click 事件，并调用 event.stopPropagation

$('#click-a').click(e => {
    e.stopPropagation()
})

会跳转到追格官网，但是不再打印：接收到 a 标签上的点击事件。

二、在 click-a 上绑定 click 事件，并调用 event.preventDefault

$('#click-a').click(e => {
    e.preventDefault()
})

不再跳转到追格官网，仍会打印：接收到 a 标签上的点击事件。

三、在 click-a 上绑定 click 事件，并 return false

$('#click-a').click(e => {
    return false
})

既不跳转到追格官网，也不打印：接收到 a 标签上的点击事件。