详解vue事件对象、冒泡、阻止默认行为
更新时间：2017年03月20日 16:03:13 作者：阁下长的好生俊俏
本篇文章主要介绍了详解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可以继续关注本站。
相关文章
为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享vue粒子动态背景效果实现代码，需要的朋友参考下吧2022-05-05
VUE3中实现拖拽与缩放自定义看板vue-grid-layout详解
想实现桌面自由拖拽布局的效果,找到了vue-grid-layout栅格布局插件,可以完美解决,下面这篇文章主要给大家介绍了关于VUE3中实现拖拽与缩放自定义看板vue-grid-layout的相关资料,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇快速解决vue在ios端下点击响应延时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
这篇文章主要介绍了vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题,文中单独给大家介绍了vue router路由懒加载问题，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue中如何获取本地IP地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了在vue中使用防抖函数组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue中关于click.stop的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue cli构建的项目中请求代理与项目打包问题,需要的朋友可以参考下2018-02-02
vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 。接下来通过本文给大家分享vue组件中的样式属性scoped实例详解，感兴趣的朋友跟随小编一起看看吧2018-10-10
这篇文章主要介绍了vue ssr服务端渲染(小白解惑)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论