如何优雅地防止点击内部按钮时触发父容器的点击事件？

2024-03-22 00:50:09

如何防止点击 div 内的按钮时触发父级点击事件

问题

在 Vue.js 应用程序中，当你点击嵌套在 div 元素内的按钮时，div 元素上的点击事件也会被触发。这可能会导致意外行为和用户体验不佳。

解决方案

使用事件修饰符

Vue.js 提供了一个事件修饰符 @click.stop，它可以阻止事件的传播。通过将其添加到 div 元素的点击事件处理程序上，可以阻止按钮点击事件触发 div 元素的点击事件。

<div v-on:click.stop="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
  Outer Div
  <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
    Inner Button
  </button>
</div>

其他方法

使用 JavaScript 阻止事件传播：

在按钮的点击事件处理程序中，可以使用 event.stopPropagation() 方法来阻止事件传播到父元素。

toggleTileOptionsMode(event, systemId, systemName, systemLayout) {
  // 阻止事件传播到父元素
  event.stopPropagation();
  // 执行其他操作
}

使用 CSS 指针事件：

可以在 div 元素上使用 CSS 指针事件属性 pointer-events 来控制元素是否响应指针事件。将其设置为 none 可以防止元素响应任何指针事件，包括点击事件。

<div style="pointer-events: none" v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
  Outer Div
  <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
    Inner Button
  </button>
</div>