目录
- 1.事件对象
- 2.使用事件对象阻止冒泡
- 3.使用vue的方式来阻止事件冒泡
- 4.阻止元素的默认行为
- 5.使用vue的方式阻止元素的默认行为
- 6.让事件执行一次
- 7.键盘事件
- 8.用vue的方式来监听键盘事件某个键
- 9.鼠标事件的按键修饰符
1.事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- vue传递事件对象 $event
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
-->
<button type="button" @click="change($event)">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
change(e){
//alert(e.type);
e.target.style.background="red";
}
}
})
</script>
</html>2.使用事件对象阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<div id="wai" @click="wai($event)">
<button @click="nei($event)" type="button">按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
wai(e){
//调用事件对象中的方法，来阻止冒泡
e.stopPropagation();
alert("外")
},
nei(e){
e.stopPropagation();
alert("内")
}
}
})
</script>
</html>3.使用vue的方式来阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的 -->。
<!-- stop 事件修饰 stop 可以阻止冒泡 -->
<div id="wai" @click.stop="wai()">
<button @click.stop="nei()" type="button">按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
wai(){
alert("外")
},
nei(){
alert("内")
}
}
})
</script>
</html>4.阻止元素的默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 阻止a标签默认跳转页面的行为 -->
<a href="http://www.163.com" @click="intoPage($event)">进入网易</a>
<!-- 阻止表单默认的同步提交行为 -->
<form action="123.html" method="get" @submit="tijiao($event)">
<input type="text" name="username" id="" value="" />
<input type="submit" value="提交表单"/>
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
intoPage(e){
//调用事件对象的方法，来阻止元素的more行为
e.preventDefault();
alert("执行点击事件");
},
tijiao(e){
e.preventDefault();
alert("异步提交");
}
}
})
</script>
</html>5.使用vue的方式阻止元素的默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#wai{
height: 200px;
width: 200px;
background: red;
}
</style>
<!-- 引入vue.js 库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 阻止a标签默认跳转页面的行为
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
-->
<a href="http://www.163.com" @click.prevent="intoPage()">进入网易</a>
<!-- 阻止表单默认的同步提交行为 -->
<form action="123.html" method="get" @submit.prevent="tijiao()">
<input type="text" name="username" id="" value="" />
<input type="submit" value="提交表单"/>
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'Hello'
},
methods:{
intoPage(){
alert("执行点击事件");
},
tijiao(){
alert("异步提交");
}
}
})
</script>
</html>6.让事件执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- .once 事件修饰符，让事件只执行一次 -->
<button type="button" @click.once="show()">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(){
alert("弹出一次");
}
}
})
</script>
</html>7.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<input type="text" name="" id="" value="" @keypress="show($event)"/>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(e){
//使用事件对象来获取键码进行判断，但是太繁琐
if(e.keyCode==13){
alert("开始搜索");
}
}
}
})
</script>
</html>8.用vue的方式来监听键盘事件某个键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 按键修饰符
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
使用 keyCode attribute 也是允许的：
<input v-on:keyup.13="submit">
-->
<input type="text" name="" id="" value="" @keypress.enter="show($event)" />
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
msg: 'hello'
},
methods: {
show() {
alert("开始搜索");
}
}
})
</script>
</html>9.鼠标事件的按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 鼠标按钮修饰符
2.2.0 新增
.left
.right
.middle -->
<button type="button" @mousedown.left="show($event)">一个按钮</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
methods:{
show(e){
/* //e.button==0 0 1 2
if(e.button==0){
alert("鼠标按下");
} */
alert("鼠标按下");
}
}
})
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
