vue中事件修饰符，stop,prevent,capture,self,once

https://blog.csdn.net/weixin_44994731/article/details/103925106?utm_source=app&app_version=4.9.3&code=app_1562916241&uLinkId=usr1mkqgl919blen

1,stop修饰符，能够阻止冒泡事件，按照案例说明如下：
按钮在div容器中。
①，点击框中非按钮的位置，会触发div的事件

②点击图中 “stop事件” 按钮，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件
注意：此时还没加stop事件

③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下，
stop会阻止事件冒泡行为。

代码如下：

1,使用stop会阻止冒泡的事件

2,div的click事件:stopDivHandler

3,按钮的click事件:stopBtnHandler

2，prevent修饰符
使用prevent修饰符会阻止事件的默认行为，如下案例中，链接地址“去百度页”不会跳转到百度页面中

代码如下

去百度页

3，capture修饰符
capture 实现捕获触发事件当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。

代码如下

capture 实现捕获触发事件的机制

capture 实现捕获触发事件当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。

captureDivHandler(){
console.log("方法名称：captureDivHandler，触发了captureDiv事件。。。");
},
captureBtnHandler(){
console.log("方法名称：captureBtnHandler，触发了capture 按钮事件。。。");
}
4，self
使用 .self 实现只有点击当前元素时候，才会触发事件处理函数，下面的案例是点击按钮，只触发了按钮本身的事件。

使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

.self 放在div 元素上

6 .stop和self的区别
一，stop说明
描述：
①首先点击外框，执行了外框的点击事件
②点击内框，执行了内框的点击事件，事件冒泡，执行了外框的事件
③点击按钮，按钮添加了stop，只触发了自己的事件，阻止了冒泡

代码如下：

二，self说明
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

案例说明
①点击外框，只触发了外框事件
②点击内框，触发了内框事件和外框事件，内框含有self
③点击按钮，触发了按钮事件和外框事件，而内框事件没有执行(内框有self)
所以，.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

代码如下：

div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
},

vue中事件修饰符，stop,prevent,capture,self,once相关推荐

027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
快速了解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中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
用vue的事件修饰符阻止冒泡
用mousemove事件举例 1.传统做法: 定义一个阻止冒泡的函数stop,形参为事件e,执行e.stopPropagation(), 在标签上添加v-on:mousemove="stop ...

vue中事件修饰符，stop,prevent,capture,self,once

vue中事件修饰符，stop,prevent,capture,self,once相关推荐

最新文章

热门文章