详解vue事件对象、冒泡、阻止默认行为
程序员文章站
2023-09-06 16:05:53
整理文档，搜刮出一个vue事件对象、冒泡、阻止默认行为的代码，稍微整理精简一下做下分享。
事件对象
整理文档，搜刮出一个vue事件对象、冒泡、阻止默认行为的代码，稍微整理精简一下做下分享。
事件对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{},
methods:{
show:function(ev){
alert(ev.clientx);
alert(ev.clienty);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" name="" value="按钮" @click="show($event)">
</div>
</body>
</html>
事件冒泡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(111);
//原生的写法
//ev.cancelbubble = true;
},
show2:function(){
alert(222);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div @click="show2()">
<input type="button" name="" value="按钮" @click.stop="show()">
</div>
</div>
</body>
</html>
阻止事件默认行为
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.show2{
padding:15px;;
}
</style>
<script src="../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new vue({
el: '#box',
data: {},
methods: {
show: function () {
alert(111)
},
show2: function () {
alert(222)
}
}
});
}
</script>
</head>
<body>
<div id="box">
<div class="show2">
<input type="button" name="" value="按钮" @contextmenu.prevent="show()">
</div>
</div>
</body>
</html>
希望本文所述对你有所帮助，vue事件对象、冒泡、阻止默认行为内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习vue可以继续关注本站。