vue 中阻止事件冒泡，捕获，默认行为事件

转载：https://www.jianshu.com/p/73ace6422ea3

要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法

1. js 事件的三阶段

 

image

• 捕获阶段
• 目标阶段:执行当前对象的事件处理程序
• 冒泡阶段

2. js 阻止事件冒泡，捕获

• 阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE)
• 阻止浏览器默认行为： event.preventDefault()

3. vue 阻止事件冒泡，捕获

• @click.stop : 阻止事件冒泡
• @click.prevent : 阻止事件默认行为
• @click.self : 事件只作用在元素本身，而不是其子元素

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

补充其他修饰符

• @click.capture : 使用事件捕获模式
• @click.once : 事件只触发一次 2.1.4新增
• @scroll.passive : 告诉浏览器这个事件的默认行为不会被取消 2.3.0新增
• @keyup.enter : 按键修饰符，enter被按下的时候触发
• @click.ctrl : 系统修饰符，Ctrl 被按下的时候触发 2.1.0新增
• @click.ctrl.exact : 有且只有 Ctrl 被按下的时候才触发 2.5.0新增

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>
<!-- scroll事件不会取消默认的滚动行为 -->
<div @scroll.passive="onScroll">...</div>
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input @keyup.13="submit">
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。
例如：用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。