vue 阻止事件冒泡,捕获方法

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

1. js 事件的三阶段

vue 阻止事件冒泡,捕获方法_第1张图片

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

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>
<div @click.self="doThat">只当在 event.target 是当前元素自身时触发处理函数.即事件不是从内部元素触发的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>
<div @scroll.passive="onScroll">scroll事件不会取消默认的滚动行为div>
<input @keyup.13="submit" placeholder="只有在 keyCode 是 13 时调用 vm.submit()">
<button @click.ctrl="onClick">即使 Alt 或 Shift 被一同按下时也会触发button>
<button @click.ctrl.exact="onCtrlClick">有且只有 Ctrl 被按下的时候才触发button>
<button @click.exact="onClick">没有任何系统修饰符被按下的时候才触发button>

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

我的个人博客有空来坐坐

https://www.wangyanan.online

你可能感兴趣的:(VUE,前端,JS,事件捕获,事件冒泡,vue事件修饰符)