<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="main">
<!--这里用<ul @click.self="ulClick()">也可以防止冒泡,表示只有自己点击的才响应,不接受子节点冒泡的事件-->
<ul @click="ulClick()">
<!--传统方法阻止冒泡,注意这里获取事件对象要用$event,这是固定写法-->
<li @click="liClick1($event)">1111111111111111</li>
<!--用stop修饰符阻止冒泡-->
<li @click.stop="liClick2()">2222222222222222</li>
<!--once修饰符表示只响应一次，第二次点击就无效了-->
<li @click.once="liClick2()">3333333333333333</li>
</ul>
<!--用prevent修饰符阻止默认行为,这样点击后就不能跳转了-->
<a href="http://www.baidu.com" @click.prevent="aClick()">www.baidu.com</a>
</div>
<script>
new Vue({
el: '#main',
data: {
},
methods: {
ulClick() {
alert('ul click!')
},
liClick1(event) {
alert('li1 click!');
event.stopPropagation();
},
liClick2() {
alert('li2 click!');
},
aClick() {
alert('a click!');
}
}
})
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
