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

2019-11-19 17:06:19

字体：大中小

来源：转载

供稿：网友

整理文档，搜刮出一个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插件写、用详解（附demo）

下一篇：javascript使用btoa和atob来进行Base64转码和解码