小程序点击事件阻止冒泡处理

最新推荐文章于 2025-06-26 21:58:39 发布

小胖龙

最新推荐文章于 2025-06-26 21:58:39 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序 Javascript

本文链接：https://blog.youkuaiyun.com/weixin_42275932/article/details/82705334

小程序同时被 2 个专栏收录

22 篇文章

订阅专栏

Javascript

15 篇文章

订阅专栏

博客探讨了在小程序中遇到的点击事件冒泡问题，导致点击view内的image元素时，页面会重复跳转。解决方案涉及到小程序事件的冒泡和非冒泡事件机制，通过理解文档中关于事件绑定的细节来阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<view id='5' class='home-menu'  bindtap='toRouter'>
  <image id='5' bindtap='toRouter' src='../../assets/icon/m3.png'></image>
  <view class='t-c'>时间</view>
</view>

这个时候会出现一种情况，当我点击view时，他会跳转到指定页面，当我点击view里面的image时，他会跳转2遍指定页面，第一反应就是当年做的第一个前端项目出现了新的认知，事件冒泡。
除了那次后来都没碰见过，今天在小程序遇到了。
解决方法：

//父元素不变
<view id='5' class='home-menu'  bindtap='toRouter'>     
    //子元素事件改为catchtap绑定
  <image id='5' catchtap='toRouter' src='../../assets/icon/m3.png'></image>
  <view class='t-c'>时间</view>
</view>

当初把小程序文档粗略看了一遍，知道事件绑定为bindtap就没仔细看相关的后续，
在小程序中事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
其中有一行字单独说明了：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

soso~