关于只触发自身绑定的事件

2024年5月3日 234次阅读 来源: ever

1. 微信小程序

事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、
capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

  • 当子节点与父节点都用普通的bind绑定了事件时，点击子节点也会触发父节点的事件。但需求是点击子节点只触发子节点事件。这时就可以在子节点用capture-catch来绑定事件，中断事件的捕获阶段和取消冒泡阶段，这样点击子节点时就只会触发子节点事件，并且不会触发父节点事件。

  • 在以下代码中，点击inner view将只触发handleTap4(因为它中断了捕获阶段和取消了冒泡阶段)

    <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-catch:touchstart="handleTap4">
    inner view
  </view>
</view>

2. vue

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  • stop
  • prevent
  • capture
  • self
  • once
  • passive
<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">
      <!-- 阻止单击事件继续传播 -->
      <div @click.stop="doSomething">一致性 Consistency<i class="header-icon el-icon-info"></i><div>
    </template>
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
</el-collapse>

以上代码点击折叠面板title中的div时将不会触发折叠面板的change事件，只触发doSomething。

3. 总结

要想实现只触发自身绑定的事件，而不触发它的子节点或父节点的事件，则：

  • 在微信小程序中，使用capture-catch来绑定事件
  • 在vue中，使用.stop事件修饰符
    原文作者：ever
    原文地址: https://segmentfault.com/a/1190000017415428
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞