[JavaScript知识库]【Vue】事件修饰符

事件修饰符

对事件可以添加一些通用的限制。语法：

v-on:事件.修饰符

或者简写：

@:事件.修饰符

vue中，事件修饰符处理了许多DOM事件的细节，让我们不用再花费大量的事件去处理这些烦恼的事情，例如事件冒泡等。

stop

阻止默认的冒泡事件。

<div>
    <div class="parent" @click="parent_child">
        <div class="child" @click.stop="click_child"></div>
    </div>
</div>

function click_parent() {
  alert("点击了parent!");
}

function click_child() {
  alert("点击了child");
}

/* 下面的其他修饰符例子也使用下列样式 */
.parent {
  padding: 10px;
  height: 20px;
  background-color: chartreuse;
}
.child {
  height: 20px;
  background-color: crimson;
}

如果不阻止冒泡，那么点击子div时，也会触发父div的点击事件，即两次弹窗。

capture

与事件冒泡的方向相反，事件捕获由外到内。

<div>
    <div class="parent" @click.capture="parent_child">
        <div class="child" @click="click_child"></div>
    </div>
</div>

function click_parent() {
  alert("点击了parent!");
}

function click_child() {
  alert("点击了child");
}

此时点击child的div会先触发parent的点击事件，然后才触发child div的点击事件，即由外到内顺序触发。

self

跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行，若不是，则冒泡跳过该元素。

<div>
    <div class="parent" @click.self="click_parent">
    	<div class="child" @click="click_child"></div>
	</div>
</div>

function click_parent() {
  alert("点击了parent!");
}

function click_child() {
  alert("点击了child");
}

为parent-div的点击事件设置self修饰符以后，点击child-div不会触发parent-div的点击事件，只有点击parent-div才会触发click事件。

once

事件只会触发一次，例如点赞功能。

<div class="parent" @click.once="click_parent"></div>

function click_parent() {
  alert("点击了parent!");
}

function click_child() {
  alert("点击了child");
}

此时点击parent-div后，触发一次点击事件，然后再点击，就不会触发点击事件了。

prevent

阻止默认行为。例如a标签，点击时，会跳转到href属性对应的链接，我们可以使用prevent事件阻止跳转的发生。

<a href="http://www.baidu.com" @click.prevent="click_child" >www.baidu.com</a>

function click_child() {
  alert("点击了child");
}

试着去掉点击事件的prevent修饰符，会发现点击超链接，触发click_child事件以后，还会跳转到百度页面（默认行为）。

passive

执行默认的行为。

每次事件发生时，浏览器都会去查询一下是否有preventDefault（也就是阻止默认时间发生）阻止该次事件的默认动作。而加上passive修饰符，就是告诉浏览器，不用查询了，没有阻止默认行为，直接执行默认行为即可，主要用于场景优化。