整理文檔，搜刮出一個(gè)vue事件對象、冒泡、阻止默認(rèn)行為的代碼，稍微整理精簡一下做下分享。
事件對象
<!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>阻止事件默認(rèn)行為
<!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事件對象、冒泡、阻止默認(rèn)行為內(nèi)容就給大家介紹到這里了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)vue可以繼續(xù)關(guān)注本站。
新聞熱點(diǎn)
疑難解答
圖片精選
