Vue.js 修饰符链答案

【问题标题】：Vue.js Modifiers ChainVue.js 修饰符链
【发布时间】：2018-03-04 20:47:26
【问题描述】：

我是 Vue.js 的新手。我正在阅读文档，一时无法理解...

使用修饰符时顺序很重要，因为相关代码是以相同的顺序生成。因此使用 @click.prevent.self 将阻止所有点击，而 @click.self.prevent 只会阻止点击在元素本身上。

我不明白这是什么意思'因此使用@click.prevent.self 会阻止所有点击，而@click.self.prevent 只会阻止对元素本身的点击。' 任何人都可以举一个例子来防止默认操作并显示差异......

例如带有链接 (<a href="https://stackoverflow.com">@click.prevent.self="fn" or @click.self.prevent="fn" difference</a>)

我了解事件阶段（捕获、目标和冒泡）。

例如，它在冒泡阶段很有用：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

.root {
  width: 300px;
  height: 300px;
  background: green;
  text-align: center;
  color: white;
}

.parent {
  width: 200px;
  height: 200px;
  background: red;
  text-align: center;
  color: white;
  margin: 50px
}

.child {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 50px;
  text-align: center;
  color: white;
}

<div id="app">
    <div class="root" v-on:click="log('root')">root
        <div class="parent" v-on:click.self.stop="log('parent')">Parent
            <div class="child" v-on:click="log('child')">Child
            </div>
        </div>
    </div>
</div>

<script type="text/javasctipt">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        log(message) {
          alert(message);
          console.log(message)
        }
      }
    })
</script>

如果我点击孩子，我会得到输出：

child
root

泡泡没有停止！但是如果我点击父冒泡停止！很有帮助！

但是，如果我将使用 prevent 和 self 修饰符（带有链接、复选框或可能带有其他元素），任何人都可以向我展示示例和区别吗？

感谢您的提前！

【问题讨论】：

标签： events vue.js preventdefault chain modifiers

【解决方案1】：

您可以查看以下示例： https://jsfiddle.net/50wL7mdz/39994/

如果你使用@click.prevent.self，你不能点击任何东西。它可以防止所有点击。如果你使用@click.self.prevent，它只会阻止当你点击<a>元素时，我们仍然可以点击选择文件上传文件

【讨论】：

【解决方案2】：

示例说明链顺序的差异

<div id="app">
  <a href="https://stackoverflow.com" @click.self.prevent target="_blank">Stackofervlow!
    <span :style="{ background: 'yellow', width: '100px', height: '100px' }">span</span>
  </a>
</div>

new Vue({
  el: '#app'
});

@click.self.prevent

如果您点击 span，stackoverflow 将打开。

如果您点击 a，stackoverflow 将不会打开。

@click.prevent

如果您点击 span，stackoverflow 将不会打开。

如果您点击 a，stackoverflow 将不会打开。

【讨论】：