这是 from the docs :
@click.prevent.self
will prevent all clicks while@click.self.prevent
will only prevent clicks on the element itself.
我尝试制作一个 fiddle 来实际阻止所有点击,但没有成功。有人可以详细说明文档中这一行的实际含义吗?
fiddle :
var app = new Vue({
el: '#appp',
methods: {
logger(arg) {
console.log(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp">
<div @click.prevent.self="logger('1')"> 1
<br>
<div @click.prevent.self="logger('2')"> ..2
<br>
<div @click.prevent.self="logger('3')"> ....3
</div>
</div>
</div>
</div>
最佳答案
查看 .prevent
和 .self
如何交互的最佳方法之一是查看 the Vue compiler 的输出。 :
.prevent.self
:
on: {
"click": function($event){
$event.preventDefault();
if($event.target !== $event.currentTarget)
return null;
logger($event)
}
}
.self.prevent
on: {
"click": function($event){
if($event.target !== $event.currentTarget)
return null;
$event.preventDefault();
logger($event)
}
}
这两个代码块之间的主要区别在于操作顺序很重要,.prevent.self
将阻止来自其子项的事件,但不运行任何代码,但是 .self.prevent
只会取消自己直接创建的事件,而完全忽略子请求。
演示:
var app = new Vue({
el: '#appp',
data: {log:[]},
methods: {
logger(arg) {
this.log.push(arg);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="appp" style="display: flex; flex-direction: row;">
<form @submit.prevent="logger('form')" style="width: 50%;">
<button>
<p @click.prevent.self="logger('prevent.self')">
prevent.self
<span>(child)</span>
</p>
<p @click.self.prevent="logger('self.prevent')">
self.prevent
<span>(child)</span>
</p>
<p @click.prevent="logger('prevent')">
prevent
<span>(child)</span>
</p>
<p @click.self="logger('self')">
self
<span>(child)</span>
</p>
<p @click="logger('none')">
none
<span>(child)</span>
</p>
</button>
</form>
<pre style="width: 50%;">{{log}}</pre>
</div>
</div>
关于vue.js - Vuejs 事件修饰符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48880786/