用vue的事件修饰符阻止冒泡

用mousemove事件举例

1.传统做法：
定义一个阻止冒泡的函数stop，形参为事件e，执行e.stopPropagation()，
在标签上添加v-on:mousemove="stop"

<div id="app"><p v-on:mousemove="getPosition">输出鼠标位置：{{x}}/{{y}}<span v-on:mousemove="stop">不输出鼠标位置</span></p>
</div>

new Vue({el:"#app",methods:{stop:function(e){e.stopPropagation()}}
})

效果：当鼠标经过span标签，不会输出鼠标的xy坐标
经过span标签以外的位置，输出xy坐标

2.使用事件修饰符.stop
无需自己定义阻止冒泡的函数，只需在v-on指令上使用该修饰符即可

<p v-on:mousemove="getPosition">输出鼠标位置：{{x}}/{{y}}<span v-on:mousemove.stop>不输出鼠标位置</span>
</p>

效果一致

用vue的事件修饰符阻止冒泡相关推荐

128-Vue中的事件修饰符-阻止冒泡事件
128-Vue中的事件修饰符 .stop 阻止事件冒泡(*) .prevent 阻止默认事件(*) .prevent.stop 阻止默认事件的同时阻止冒泡 .once 阻止事件重复触发(once与st ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
vue 事件上加阻止冒泡阻止默认事件
重点 vue事件修饰符  <a v-on:click.stop="doThis"></a><!-- 提交 ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...

用vue的事件修饰符阻止冒泡

用vue的事件修饰符阻止冒泡相关推荐

最新文章

热门文章