//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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上,若不是,则冒泡跳过该元素