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

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

看看事件修饰符,v-on:click.stop将阻止该点击从传播或"冒泡"到父元素.

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>

在这里看到它

注意:如果您.self在单击子项时删除,则父事件也将触发.

2.(第二种情况)您有以下代码:

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

问题是:

1. 单击图标元素时,将触发父单击.(你不想要这个)
2. 您不能使用第一个解决方案,因为即使单击"单击以激活"文本,您也要激活父事件.

解决方法是将.stop修饰符放在图标元素中,这样父事件就不会触发.

在这里看到它

Answer 3

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

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

Answer 4

正如Justin提供的链接所提到的, 您可以在click事件中找到.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 5

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