20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件.pdf
版权申诉
64 浏览量
2021-12-16
21:27:17
上传
评论
收藏 184KB PDF 举报
[基础基础]Vue绑定事件详讲绑定事件详讲-事件修饰符事件修饰符
通过修饰符解决冒泡事件
stop修饰符
self修饰符
其它常用修饰符
初始页面
绑定事件中的修饰符有很多种，这些修饰符各有各的用处。
本节课将讲解6种Vue中的事件修饰符，分别是；
stop、prevent、capture、self、once和passive。
通过修饰符解决冒泡事件通过修饰符解决冒泡事件
在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。
新建一个文件Demo20.html
修改模板 template 部分，在最外层增加一个 <div> 并添加 click 事件。
修改方法 methods 部分，删除无用方法，保留两个方法，增加 alter 提示。
形成冒泡效果，就是有嵌套的DOM元素时，两个都有绑定事件，JS会自动向上传递事件。
stop修饰符修饰符
在Vue中要停止冒泡是非常简单的，只要加加一个事件修饰符stop就可以了。
<button @click.stop="addCountClick()">增加一位小伙伴</button>
self修饰符修饰符
除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。
template:`
<div @click.self="handleBtnClick1">
<div>目前已点报名的小伙伴数量{{count}}.</div>
<button @click=" addCountClick()">增加一位小伙伴</button>
</div>
`
这时候你会发现点击那里，都没办法触发 hanldeBtnClick1 方法了，这是因为目前最外层div下都是独立的DOM元素，就是都有成对标签出现，都不属于最外自己，都是他们的子元
素。
可以编写一段专属最外层DIV的文字。
template:`
<div @click.self="handleBtnClick1">
我是最外层的DIV文字
<div>目前已点报名的小伙伴数量{{count}}.</div>
<button @click=" addCountClick()">增加一位小伙伴</button>
</div>
`
这样当点击我是最外层的DIV文字时，就会触犯 handleBtnClick1 方法了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo19</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data(){
return{
count:0
}
},
methods:{
addCountClick(){
this.count++
},
handleBtnClick1(){
alert(1)
},
},
template:`
<div @click.self="handleBtnClick1">
我是最外层的DIV文字
<div>目前已点报名的小伙伴数量{{count}}.</div>
剩余12页未读，继续阅读
资源评论
