Question

单击div中的按钮是否可以阻止<div>元素上的函数运行？

单击按钮元素时，不应触发函数toggleSystemDetails？这可能在Vue吗？

<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}">
      <div class="grid-tile__list-item--overlay">
        <button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
          Layout Settings
        </button>
      </div>

Answer 1

看看Event Modifiers，v-on:click.stop会阻止点击传播或＆＃34;冒泡＆＃34;直到父元素。

Answer 2

这是解决此问题的方法。

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

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修饰符放在icon元素上，以使父事件不会触发。

See it in action here

Answer 3

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

Answer 4

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

我发现在某些情况下，子元素需要@click.stop.prevent就是这样，才能阻止它冒泡到父元素。我假设v-on:click.stop.prevent具有相同的效果（非简写形式）。

Answer 5

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

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

5 个答案: