详解vue事件对象、冒泡、阻止默认行为

时间：2021-05-25

整理文档，搜刮出一个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可以继续关注本站。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章