//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="vue-app"> <button @dblclick.once="up">加一岁</button><!--只允许进行一次修改--> <button @dblclick="down">减一岁</button> {{ age }} <div id="square" v-on:mousemove="update">{{ x }},{{ y }} <div id="stop" v-on:mousemove.stop></div><!--阻止事件传播,当放到框框里面,坐标停止改变--> </div> <a v-on:click="alas()" href="https://www.baidu.com/">百度</a> <a v-on:click.prevent="alaf()" href="https://www.baidu.com/">百度</a><!--阻止跳转--> </div> <script src="app.js"></script> </body>
//app.js
new Vue({ el:"#vue-app", data:{ age:30, x:0, y:0, }, methods:{ up:function(){this.age++;}, down:function(){this.age--;}, update:function(event) { //console.log(event); this.x=event.offsetX; this.y=event.offsetY; }, alas:function() { alert("succes!"); }, alaf:function() { alert("fail!"); } } });
1.stop
阻止事件传播,代码例子里,进入到所选范围则阻止坐标再次更变
2.prevent
阻止所有点击,这里可以运用成,如登陆界面,密码或者用户名错误,则不进行跳转,仍然在该页面,如果成功,提示成功,并且跳转
3.once
只能进行一次操作,这里年龄只能加一次
4.capture
https://blog.csdn.net/wangxiaoxiaosen/article/details/73849455
可参考这个例子,.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发
5.self
https://www.zhangshengrong.com/p/v710PGzY1M/
可参考这个例子,.self会监视事件是否是直接作用到obj2上,若不是,则冒泡跳过该元素