0

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

https://vuejs.org/v2/guide/events.html

使用修饰符时顺序很重要，因为相关代码是以相同的顺序生成的。因此使用@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 修饰符（带有链接、复选框或可能带有其他元素），任何人都可以向我展示示例和区别吗？

感谢提前！

4

2 回答 2

0

示例说明了链顺序的差异

<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

  1. 如果单击span，将打开 stackoverflow。
  2. 如果单击a，stackoverflow 将不会打开。

@click.prevent

  1. 如果单击span，stackoverflow 将不会打开。
  2. 如果单击a，stackoverflow 将不会打开。
于 2017-09-24T10:14:18.170 回答
0

You can check this example: https://jsfiddle.net/50wL7mdz/39994/

If you use @click.prevent.self, you can't click on anything. It prevents all click. If you use @click.self.prevent, it only prevents when you click on <a> element, we can still click on choose file to upload file

于 2017-09-23T13:22:52.710 回答