取消事件冒泡 uniapp
1. 什么是事件冒泡
在解决如何取消事件冒泡之前，先要了解什么是事件冒泡。通俗来讲，事件冒泡就是事件触发后，从最具体的元素开始逐步向上传播事件，直到传播到文档的根节点（document 对象）。在这个过程中，会按照事件被触发的顺序依次触发每个元素的对应事件。
具体来说，以用户点击一个按钮为例：用户点击按钮会先触发按钮上的点击事件；然后会逐步向上传播事件，触发按钮所在的父元素、父元素的父元素，一直到 document 对象。
事件冒泡的机制使得我们可以在元素的祖先节点上，给多个元素添加事件监听器，达到代码复用的效果。但有时候，它也会给我们带来麻烦，特别是在开发某些交互效果时，比如点击按钮后无意间触发了父元素的点击事件，导致逻辑混乱。
2. 如何取消事件冒泡
既然知道了事件冒泡的机制，那么问题来了，如何取消事件冒泡呢？
2.1 阻止默认行为
在使用浏览器原生事件机制时，可以通过 event.preventDefault() 方法来停止事件的默认行为，从而阻止事件继续冒泡。比如，点击链接时会跳转到对应的页面，但可以通过以下代码取消这个行为：
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault()
})
但在 uniapp 中，由于它封装了事件处理机制，不能直接访问原生的事件对象，因此上述方法无法奏效。
2.2 使用 stopPropagation 方法
在 uniapp 中，可以使用事件对象 $event 的 stopPropagation 方法来取消事件的冒泡。该方法会停止当前事件在事件传播链中的进一步传播，并且阻止进一步的事件处理。
以下是一个取消事件冒泡的示例：
// template
<template>
<view class="parent" @click="handleParentClick">
<view class="child" @click="handleChildClick">Child</view>
</view>
</template>
// script
export default {
methods: {
handleParentClick(e) {
console.log('Parent clicked')
},
handleChildClick(e) {
e.stopPropagation()
console.log('Child clicked')
}
}
}
上述代码中，当点击子元素时，会触发子元素的点击事件，但不会触发父元素的点击事件，因为在子元素的点击事件处理函数中，调用了 stopPropagation 方法阻止了事件冒泡。
2.3 使用 capture 模式
在事件冒泡的整个过程中，先是从最具体的元素向上遍历，直到传播到文档根元素。而事件处理程序将在每个遇到的元素上被调用。但是，可能需要在事件捕获期间处理事件，也就是在事件到达目标之前处理事件。在 uniapp 中，可以使用 capture 模式来实现这个目的。
以下是一个使用 capture 模式取消事件冒泡的示例：
// template
<template>
<view class="parent" @click.capture="handleParentClick">
<view class="child" @click="handleChildClick">Child</view>
</view>
</template>
// script
export default {
methods: {
handleParentClick(e) {
console.log('Parent clicked')
},
handleChildClick(e) {
console.log('Child clicked')
}
}
}
上述代码中，虽然点击了子元素，但先触发父元素的点击事件，然后才触发子元素的点击事件。这是因为在父元素的点击事件处理函数中，使用了 capture 模式，将事件处理程序安装在事件捕获阶段，这样父元素的点击事件处理函数先于子元素的点击事件处理函数执行。
3. 小结
在 uniapp 中，可以通过 $event.stopPropagation() 方法、capture 模式来取消事件冒泡，避免产生不必要的麻烦。根据实际需求，选择不同的取消事件冒泡的方法，是开发中需要注意的细节问题。