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>
页面操作效果
![](https://static001.geekbang.org/infoq/30/3014a69e6ae88787ae0b3086a3608ffc.gif)
我们看到不光点击按钮的点击事件触发了,而且父容器 div 的点击事件也触发了,这时我们就可以使用.stop 来阻止这个冒泡了,如下
![](https://static001.geekbang.org/infoq/e4/e441d1384191f29fa2bc61d9c590f513.gif)
在访问测试
![](https://static001.geekbang.org/infoq/58/58519f7ccf0342803e4d2f3db611dba3.gif)
通过输出可以看到点击事件没有往上冒泡了!
.prevent
阻止默认行为,我们可以通过 a 标签来演示,先看未阻止的情况
![](https://static001.geekbang.org/infoq/dd/dd919f886af58e30f8ea9e9b8884504b.png)
看下演示效果
![](https://static001.geekbang.org/infoq/eb/ebf109fb5fac4047f596725b2b381fd2.gif)
我们可以看到先触发了我们的弹出框,然后页面跳转了,这时我们可以阻止默认行为
![](https://static001.geekbang.org/infoq/e6/e6c9e7adb04272baf31a817a4412f4d8.gif)
再看效果
![](https://static001.geekbang.org/infoq/29/291654421bdda8ac18b8d7002a0a4660.gif)
从效果中可以看出默认的跳转事件被阻止了!
.capture
实现捕获触发事件的机制,即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。 先看没有该修饰符的操作
![](https://static001.geekbang.org/infoq/43/434d69e73248e038f8ceec6a8cb3d350.png)
![](https://static001.geekbang.org/infoq/cd/cd9d3f312261d4218907710a70f03c05.gif)
输出我们可以看到先触发的 按钮的点击事件,然后触发的 div 的点击事件,现在我们绑定 .capture
![](https://static001.geekbang.org/infoq/83/8301310a2d88476a00bf9491eea269a7.png)
![](https://static001.geekbang.org/infoq/c3/c3bdd2aed54b639f1228b224f623321e.gif)
通过输出可以看到是先触发的 绑定的有".capture"的 div,然后触发的 btn 按钮。
.self
实现只有点击当前元素时候,才会触发事件处理函数
![](https://static001.geekbang.org/infoq/a6/a6903a9ec28430a6491faef6fa9256aa.png)
效果演示:
![](https://static001.geekbang.org/infoq/8c/8cd595f66e87de0088971489e9d7af90.gif)
.once
只触发一次事件处理函数
![](https://static001.geekbang.org/infoq/cd/cdd25adf816879eb9adeaf6864084dd0.png)
![](https://static001.geekbang.org/infoq/bb/bb8c967608a790f02d94469da16ce5d8.gif)
通过输出效果可以看出阻止默认行为只有效了一次!
.stop 和 .self 的区别
先看.stop 的行为:
评论