网络编程
位置：首页>> 网络编程>> JavaScript>> 详解vue事件对象、冒泡、阻止默认行为

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

作者：阁下长的好生俊俏　　发布时间：2024-04-28 09:26:19　

标签：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可以继续关注本站。

来源：http://blog.csdn.net/h1069495874/article/details/55225184

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com