21目前最全最完善 Vue 事件修饰符

事件修饰符

① 常用字符

• .stop

  阻止单击事件继续传播(给内部事件添加，可防止事件冒泡)

<div @click="divClick">   <!--不会被触发点击事件-->
  <a @click.stop="itemClick"></a>  <!--点击事件-->
</div>

• .once

  点击事件只会出发一次

<a @click.once="itemClick"></a>

• .capture

  捕获冒泡（如果有多个，从外到内依次执行，其余部分从内到外依次执行）

<div @click.capture="divClick">  <!--第一个被捕获-->
  <div @click.capture="div2Click"> <!--第二个被捕获-->
  	<div @click="div2Click">  <!--第四个被捕获-->
  		<a @click="itemClick"></a>  <!--第三个被捕获-->
		</div>
	</div>
</div>

• .self

  绑定的元素可以避免被冒泡影响

<div @click.capture="divClick">  <!--第一个被捕获-->
  <div @click.self="div2Click"> <!--不会被冒泡影响-->
  	<div @click="div2Click">  <!--第三个被捕获-->
  		<a @click="itemClick"></a>  <!--第二个被捕获-->
		</div>
	</div>
</div>

• .passive

不拦截默认事件，浏览器不用判断是否阻止，可以提高性能；也可以避免用户页面，而不能迅速滑动

• .prevent

  1. 拦截默认事件，防止a标签(往往不会因为.stop停止冒泡)发生冒泡事件；
  2. 提交事件不再重载页面

 <form @submit.prevent="onSubmit"></form>

• .native

  在父组件中给子组件一个事件的绑定，将组件变成普通的标签，才能进行事件触发

② 特殊字符

1. 按键修饰符

• .enter

  可以检查详细的按键

	<input v-on:keyup.enter="submit" />

2. 按键码

• .tab
• .delete(捕获"删除"和"退格"键)
• .esc
• .space（空格键）
• .up
• .down
• .left
• .right

3. 系统修饰符(2.1.0新增)

按下相应按键时才触发鼠标或键盘事件的监听器

• .ctrl
• .alt
• .shift
• .meta（注意：在各个系统键盘上可能有差异 Mac ==> command 键 (⌘) windows ==> Windows 徽标键 (⊞)）

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

4. .exact修饰符(2.5.0新增)

允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

5. 鼠标按钮修饰符(2.2.0新增)

会限制处理函数仅响应特定的鼠标按钮

• .left
• .right
• .middle

---

注意1：修饰符可以串联

<a @click.stop.prevent="itemClick"></a>

注意2：passive 和 prevent 有冲突，不能同时绑定(.prevent会被忽略，并报错)