一.事件修饰符
event.preventDefault()/阻止默认行为或者event.stopPropagation()/阻止事件冒泡
以上方法需要处理DOM事件细节,代码繁琐
为了解决这个问题,Vue.js提供了事件修饰符
修饰符是以点开头的指令后缀来表示的
.stop 阻止事件冒泡继续传播
<a v-on:click.stop="doThis"></a>
.self 当事件目标是当前元素自身时,触发事件
<ul @click.self="ulClick"></ul>
.capture 将原本默认的冒泡方式改为捕捉方式
.prevent 阻止事件默认行为
@submit.prevent 提交事件不在重载页面
<form v-on:click.stop.prevent="onSubmit"></form>
.stop.prevent 修饰符可以串联,既阻止冒泡又阻止默认行为
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
二.事件修饰符的使用
<body>
<div id="app" @click="divClick">
<ul @click="ulClick">
<!-- 事件修饰符 -->
<!-- .stop 阻止事件冒泡 -->
<li @click="liClick">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
divClick(){
console.log('div');
},
ulClick(){
console.log('ul');
},
liClick(){
console.log('li');
// JS原生写法
// evt.stopPropagation()
}
}
})
</script>
</body>
<body>
<div id="app">
<ul @click.self="ulClick">
<!-- 事件修饰符.self:当前事件的目标是当前元素自身,才会触发 -->
<!-- < @click.self="ulClick"> -->
<!-- <li @click="liClick">111</li> -->
<!-- 使用vue方式阻止事件冒泡 -->
<!-- 事件修饰符.stop:阻止事件冒泡 -->
<li @click.stop="liClick">111</li>
<li @click="liClick">222</li>
<li>333</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
// liClick(){
// console.log('li');
// },
ulClick(){
console.log('ul');
},
liClick(evt){
console.log('li');
// evt.stopPropagation()
},
}
})
</script>
</body>
三.鼠标事件
<head>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
background: rgb(229, 251, 132);
text-align: center;
line-height: 40px;
color: blueviolet;
}
</style>
</head>
<body>
<div>鼠标移入</div>
<script>
let mouse = document.querySelector('div');
// 鼠标移入
mouse.onmouseover = function(){
mouse.style.background = 'black'
}
// 鼠标移出
mouse.onmouseout = function(){
mouse.style.background = 'rose red'
}
// 鼠标移动
mouse.onmousemove = function(e){
// 事件对象
e = e ||window.event
// 打印光标位置
console.log(e.offsetX,e.offsetY);
}
// 左键按下
document.onmousemove = function(e){
e = e ||window.event
// 打印光标位置
console.log('x',e.offsetX,'y',e.offsetY);
}
// 左键抬起
document.onmouseup = function(){
console.log('mouseup');
document.onmousemove = null
}
</script>
</body>
四.实例
计算正方形面积
<div id="app">
<!-- 方法一:以内联方式响应事件 -->
<!-- <button v-on:click="length++">改变边长</button> -->
<!-- 方法二:绑定方法处理事件 -->
<button v-on:click="changeLength">改变边长</button>
<p>正方形的边长是{{ length }},面积是{{ area }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
length:2
},
computed:{
area(){
return this.length*this.length
}
},
methods:{
changeLength(){
this.length++
}
}
})
</script>