在uni中点击父元素不希望子元素也触发父元素的事件
时间: 2024-03-16 13:42:33 浏览: 24
在uni-app中,你也可以通过阻止事件冒泡来实现这个功能。与普通的Web开发类似,你可以在父元素的事件处理函数中,使用 `event.stopPropagation()` 方法来阻止事件继续向上传播,这样子元素的事件就不会触发了。
不过需要注意的是,uni-app中的事件对象是 `uni.event`,而不是普通的Web开发中的 `event`。因此,你需要对代码做一些调整,如下所示:
```html
<template>
<view class="parent" @tap="handleTapParent">
<view class="child" @tap="handleTapChild"></view>
</view>
</template>
<script>
export default {
methods: {
handleTapParent(uniEvent) {
console.log('Parent clicked');
},
handleTapChild(uniEvent) {
console.log('Child clicked');
uniEvent.stopPropagation();
}
}
}
</script>
```
在上面的代码中,我们使用了 `@tap` 指令来绑定父元素和子元素的点击事件。在父元素的事件处理函数中,我们使用了 `uniEvent.stopPropagation()` 方法来阻止事件冒泡。这样当点击子元素时,只会触发子元素的事件处理函数,而不会触发父元素的事件处理函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)