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

vue.js Vue.js

小卤蛋理查德Tony

2020-03-11

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

第671篇《单击div中的按钮时防止单击父项》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
GOL蛋蛋 2020.03.11

如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>
逆天LEY逆天 2020.03.11

看一下事件修饰符，v-on:click.stop将阻止该点击传播或“冒泡”至父元素。

小胖MandyGil 2020.03.11

这是解决此问题的方法。

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

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

看到它在这里行动

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android