写点什么

Vue 学习之事件修饰符,java 后端开发入门

作者:Java高工P7
  • 2021 年 11 月 10 日
  • 本文字数:654 字

    阅读完需:约 2 分钟

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 的行为:

用户头像

Java高工P7

关注

还未添加个人签名 2021.11.08 加入

还未添加个人简介

评论

发布
暂无评论
Vue学习之事件修饰符,java后端开发入门