You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.4 KiB
96 lines
2.4 KiB
<!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> |