1.js事件的三阶段
- 捕获：事件由页面元素接受，逐级向下，到具体的元素
- 目标：具体的元素本身
- 冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素
IE5.5：div---body---document
IE6.0: div---body---html---document
Mozilla:div---body---html---document---window
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>
4.补充其他修饰符
@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 只会阻止元素上的点击。