vue事件修饰符

最新推荐文章于 2018-11-23 15:38:43 发布

何迟

最新推荐文章于 2018-11-23 15:38:43 发布

阅读量128

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82809948

版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章 5 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

注意：

1.self事件自会阻止自己的冒泡事件或者监听事件，不会影响其他元素，.stop会影响整体。

2.注意事件修饰符的使用位置，.stop阻止事件冒泡自下而上，.capture自上而下执行。所以一个在用在子元素，一个在父元素

3.事件修饰符可以联合使用，并且顺序对结果没有任何影响

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
            .wrapper{
                height: 150px;
                background-color:darkorange;
            }
    </style>
</head>
<body>
      <div id="app">

          <div class="wrapper" v-on:click="divClick">
              <input type="button" value="点我" v-on:click="inputClick">
          </div>
          <!--任何事件修饰符都不添加-->
          
          <div class="wrapper" v-on:click="divClick">
              <input type="button" value="点我" v-on:click.stop="inputClick">
          </div>
          <!--.stop阻止事件冒泡，自下而上的执行-->

          <div class="wrapper" v-on:click.capture="divClick">
              <input type="button" value="点我" v-on:click="inputClick">
          </div>
          <!--.capture执行捕获事件的机制，用在父元素上，自上而下-->

          <div class="wrapper" v-on:click.self="divClick">
              <input type="button" value="点我" v-on:click="inputClick">
          </div>
          
          <a href="http://www.bilibili.com" v-on:click.prevent="linkClick">值得你拥有</a>
          <!--.prevent阻止默认事件，这里使用之后不会跳转，只会执行输出结果-->

          <a href="http://www.bilibili.com" v-on:click.prevent.once="linkClick">值得你拥有</a>
          <!--.once只触发一次事件处理函数，并且事件修饰符可以连在一起使用，顺序没有影响-->
          
      </div>

      <script>
          //创建Vue实例
          var vm = new Vue({
              el:'#app',
              data:{},
              methods:{
                  divClick(){
                      console.log('div事件')
                  },
                  inputClick(){
                      console.log('input事件')
                  },
                  linkClick(){
                      console.log('link事件')
                  }
              }
          });
      </script>
    
</body>
</html>

执行效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue事件修饰符

注意：1.self事件自会阻止自己的冒泡事件或者监听事件，不会影响其他元素，.stop会影响整体。2.注意事件修饰符的使用位置，.stop阻止事件冒泡自下而上，.capture自上而下执行。所以一个在用在子元素，一个在父元素3.事件修饰符可以联合使用，并且顺序对结果没有任何影响 HTML代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"...
复制链接

扫一扫