微信小程序 阻止事件冒泡

当一个组件上的事件被触发后，不仅当前组件会接收到这个事件，其父级组件也会按顺序接收到这个事件，直到事件被消耗或到达最外层。在微信小程序中，事件分为冒泡事件和非冒泡事件两大类，它们的区别在于事件是否能从原始触发组件开始，向父级组件传播（即“冒泡”）。：非冒泡事件触发时，仅当前组件会接收到该事件，不会向上传播到父组件。这类事件在触发后立即停止，不会影响到其他层级的组件。⭐使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。要想阻止事件冒泡也很简单,

上述例子，点击事件 用到了bindtap， 实际上事件绑定分别有 bind 与 catch 两种，修改上述 wxml 页面中 view2的bindtap事件为catchtap,保存后，点击view2, 日志只会输出。以下看一个例子理解catch阻止冒泡。点击 view3, 日志只会输出。这就说明冒泡事件被阻止了。

使用catchtap后，点击goClick事件就不会触发detailClick事件。解决方法：阻止冒泡事件：将点击事件bindtap换成catchtap。点击需求，但是问题出现在点击下面的按钮时也会触发跳转详情页。需求：点击整个卡片可以跳转详情页，点击按钮，实现。

在微信小程序当中，当两个包含的视图都使用了bindtap函数来绑定点击事件的话，就会发生冒泡事件（即点击内部事件时将同时触发外部事件），如果我们要想阻止冒泡事件的发生，将被包含在内部的bindtap该为catchtap即可，下面请看具体事例。

使用uniapp开发小程序的时候，@click.stop来做事件冒泡没有作用。 查看官方给出的文档是这样写应该就可以了，但是就是没起作用，点击子组件的时候还是触发了父组件的事件。 <u-field disabled=true maxlength='9' @tap.stop="keyboard('money')" label-width='0' v-model="from.money" :placeholder="lang.InputMoney" :clearable='false'

使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件。：当一个组件的事件被触发后，改事件不会向父节点传递。：当一个组件的事件被触发后，改事件会向父节点传递。事件分类和阻止事件冒泡。冒泡事件，非冒泡事件。

（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法

1.直接用方法 ：catchtouchmove="preventD" &lt;view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"&gt;&lt;/view&gt; /

微信小程序阻止事件冒泡。不是死板的catch:tap

阻止事件冒泡 只需要在父级标签加上catchtab=“事件名称”，就行了 防止微信报警告信息