<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script type="text/javascript" src="../vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
height: 80px;
background-color: skyblue;
}
.box2{
width: 60px;
background-color: orange;
}
.box3{
height: 80px;
background-color: blue;
}
.list{
height: 200px;
width: 200px;
background-color: bisque;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<!-- 阻止默认操作-->
<h2>你好 {{name}}！！</h2>
<a href="https://www.baidu.com" target="_blank" @click.prevent="showView">阻止默认操作</a>
<!-- 停止冒泡-->
<div class="demo1" @click="showView">
<button @click.stop="showView">停止冒泡</button>
</div>
<!-- 事件只触发一次-->
<button @click.once="showView">事件只触发一次</button>
<!-- 事件捕获模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- self控制触发事件-->
<div class="box3" @click.self="showInfo">
<button @click="showInfo">self控制触发事件</button>
</div>
<!-- passive优先处理时间，不用等待事件绑定功能执行完毕，多用于移动端-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
name: '哈哈'
},
methods: {
showView(e){
// e.preventDefault() // 禁用默认事件
// e.stopPropagation() // 禁用冒泡
alert("hahahaha!!!")
},
showMsg(msg){
console.log(msg)
},
showInfo(e){
console.log(e.target)
},
demo(){
for (let i=0; i<=10000; i++) {
console.log('@')
}
}
}
})
</script>
</body>
</html>