转载：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 只会阻止元素上的点击。