//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上，若不是，则冒泡跳过该元素