Vue 学习之事件修饰符，java 后端开发入门
background-color: gold;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<input type="button" value="点击" @click="btnHandler">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
}
}
})
</script>
</body>
</html>
页面操作效果
我们看到不光点击按钮的点击事件触发了，而且父容器 div 的点击事件也触发了，这时我们就可以使用.stop 来阻止这个冒泡了，如下
在访问测试
通过输出可以看到点击事件没有往上冒泡了！
.prevent
阻止默认行为,我们可以通过 a 标签来演示，先看未阻止的情况
看下演示效果
我们可以看到先触发了我们的弹出框，然后页面跳转了，这时我们可以阻止默认行为
再看效果
从效果中可以看出默认的跳转事件被阻止了！
.capture
实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作
输出我们可以看到先触发的 按钮的点击事件，然后触发的 div 的点击事件，现在我们绑定 .capture
通过输出可以看到是先触发的 绑定的有".capture"的 div，然后触发的 btn 按钮。
.self
实现只有点击当前元素时候，才会触发事件处理函数
效果演示:
.once
只触发一次事件处理函数
通过输出效果可以看出阻止默认行为只有效了一次！
.stop 和 .self 的区别
先看.stop 的行为:
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论