单击div内的按钮时防止单击父级

Posted 2023-02-16

【中文标题】单击div内的按钮时防止单击父级

【英文标题】：Prevent on click on parent when clicking button inside div

【发布时间】：2018-01-23 20:00:31

【问题描述】：

点击div内的按钮时，是否可以阻止<div>元素上的函数运行？

点击按钮元素时，函数：toggleSystemDetails应该不会被触发？这在 Vue 中可行吗？

<div 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>

【问题讨论】：

Section div closing handle z-index的可能重复

【参考方案1】：

查看 Vue.js v2 文档（v3 文档here）中的Event Modifiers，v-on:click.stop 将阻止该点击传播或“冒泡”到父元素。

【讨论】：

认为这实际上是v-on:click.prevent

@PJATX 这是另一个事件修饰符（在我链接的 VueJS 指南中有介绍）。例如，如果您想阻止浏览器执行其默认操作，则对表单提交很有用。在这个特定的例子中，stop 修饰符更好，因为问题是关于阻止点击将链传播到父 div。

啊，明白了。我看到另一篇文章给人的印象是上面的新语法。我在尝试阻止对子元素的点击到达父元素时发现了这一点，.stop 不起作用，而.prevent 起作用。上下文正在单击模态与模态背景。

我尝试添加 .stop 但它仍然会在下一个事件触发后立即解决...

@PJATX 您可能指的是 Vue 3 吗？ ".stop" 在 Vue2 中仍然有效，刚刚测试过。

【参考方案2】：

如 Justin 提供的 link 中所述 你可以在点击事件中.self

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

【参考方案3】：

这里是如何解决这个问题。

假设你有一个父元素和一些子元素。

1.（第一种情况）您希望父点击不影响子点击。只需在父元素处添加.self 修饰符：

  <div class="parent" @click.self="parent"> <!-- .self modifier -->
    <span class="child" @click="child1">Child1</span>
    <span class="child" @click="child2">Child2</span>
    <span class="child" @click="child3">Child3</span>
  </div>

See it in action here

注意：如果您在单击子项时删除.self，父事件也会触发。

2.（第二种情况）您有以下代码：

  <div @click="parent">
    Click to activate 
    <i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
  </div>

问题是：

当您单击图标元素时，父级单击将触发。 （你不想要这个） 您不能使用第一种解决方案，因为您想触发父事件，即使文本“点击激活”被点击。

解决方案是将.stop 修饰符放在图标元素上，这样父事件就不会触发。

See it in action here

【讨论】：

很好的答案 - 也许您可以编辑答案以在答案本身的示例代码中实际包含 @click.stop，而不仅仅是在链接代码中？

【参考方案4】：

我只想把我的两分钱放在这里，因为我确实发现自己一次又一次地寻找这个问题（有一天我会记得）。

我发现在某些情况下，子元素需要@click.stop.prevent，仅此而已，以阻止它冒泡到父元素。 我假设v-on:click.stop.prevent 会产生相同的效果（非速记）。

【讨论】：

不错。当按钮由组件传递并且在父视图中处理 @click 事件时，这也很有效。

【参考方案5】：

此外，如果子元素阻止您点击父元素，您可以通过将 CSS 添加到子元素 pointer-events: none 来解决此问题。 如果子元素中没有事件，则此解决方案有效。

【参考方案6】：

如果您使用 render/createElement 来生成元素（例如动态），则使用：

event.stopPropagation(); event.preventDefault(); 

一个渲染函数的例子：

on:  click:  function (event)  event.stopPropagation(); event.preventDefault(); yourmethod()  

https://vuejs.org/v2/guide/render-function.html

【参考方案7】：

您可以在子组件上使用@click.stop，例如

.modal(@click="myfunc")
    default-content(@click.stop)