VUE的事件的修饰符

最新推荐文章于 2023-03-18 16:41:41 发布

脚踏实地，坚持不懈!

最新推荐文章于 2023-03-18 16:41:41 发布

阅读量194

点赞数 1

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126612683

版权

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的，如下面所列举的：
.stop：阻止单击事件继续传播，即阻止事件冒泡
.prevent：阻止事件的默认行为，比如可以阻止a标签自动跳转页面的默认行为
.capture：事件捕获模式，捕获是从父元素到子元素，换句话说是，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self：只当在 event.target 是当前元素自身时触发处理函数
.once：事件只触发一次，即事件不是从内部元素触发的
.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>事件的修饰符</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
                  <style>
                                    #d1 {
                                                      width: 200px;
                                                      height: 200px;
                                                      background-color: aqua;
                                                      display: flex;
                                                      justify-content: center;
                                                      align-items: center;
                                                      margin-top: 20px;
                                                      text-align: justify;
                                    }

                                    #d2 {
                                                      width: 100px;
                                                      height: 100px;
                                                      background-color: red;
                                                      text-align: center;
                                    }

                                    .box1 {
                                                      width: 300px;
                                                      height: 300px;
                                                      background-color: chocolate;
                                                      display: flex;
                                                      justify-content: center;
                                                      align-items: center;
                                    }

                                    .box2 {
                                                      width: 100px;
                                                      height: 100px;
                                                      background-color: chartreuse;
                                    }

                                    .demo1 {
                                                      width: 890px;
                                                      height: 240px;
                                                      background-color: blue;
                                                      margin-top: 30px;
                                    }

                                    .btn1 {
                                                      margin: 120px 390px;
                                    }

                                    .uList {
                                                      width: 200px;
                                                      height: 200px;
                                                      background-color: rgb(205, 63, 106);
                                                      overflow: auto;
                                    }

                                    li {
                                                      height: 100px;
                                    }
                                    .uList1{
                                                      width: 200px;
                                                      height: 200px;
                                                      background-color: rgb(90, 11, 105);
                                                      overflow: auto; 
                                                      margin-top: 20px;            
                                    }
                  </style>
</head>

<body>
                  <div id="demo">
                                    <!-- 阻止默认事件（常用） -->
                                    <a href="https://v2.cn.vuejs.org/v2/guide/" @click.prevent="jumpPage">VUE官网</a>
                                    <!-- 阻止事件冒泡（常用） -->
                                    <div id="d1" @click="showInfo">
                                                     <!-- <div id="d2" @click.stop="showInfo">红色div</div>-->
                                                     <!--修饰符可以像下面这样连着用-->
                                                     <a href="https://v2.cn.vuejs.org/v2/guide/" @click.stop.prevent="showInfo">VUE官网</a>
                                    </div>
                                    <!-- 事件只触发一次（常用） -->
                                    <!--<button @click.once="showbtn">点我提示信息</button>-->
                                    <button @click.once="showbtn" style="margin-top: 10px;">事件只是触发一次</button>
                                    <!-- 使用事件的捕获模式 -->
                                    <div class="box1" @click.capture="showMsg(1)">
                                                      div1
                                                      <div class="box2" @click="showMsg(2)">
                                                                        div2
                                                      </div>
                                    </div>
                                    <!-- 只有event.target是当前操作的元素时才触发事件； -->
                                    <div class="demo1" @click.self="showSelf">
                                                      <button @click="showSelf"
                                                                        class="btn1">只有event.target是当前操作的元素时才触发事件</button>
                                    </div>
                                    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
                                    <ul @wheel.passive="wheelScroll" class="uList">
                                                      <li>a</li>
                                                      <li>b</li>
                                                      <li>c</li>
                                                      <li>d</li>
                                    </ul>

                                    <ul @scroll = "wheelScroll1" class="uList1">
                                                      <li>a1</li>
                                                      <li>b2</li>
                                                      <li>c3</li>
                                                      <li>d4</li>
                                    </ul>
                  </div>
                  <script>
                                    Vue.config.productionTip = false;
                                    const vm = new Vue({
                                                      el: '#demo',
                                                      methods: {
                                                                        jumpPage(e) {
                                                                                          /*
                                                                                              prevent这个修饰符可以阻止事件的默认事件
                                                                                              本来我们点击标签a，就会默认直接通过连接
                                                                                              跳转到新的页面里，但是我们通过prevent
                                                                                              阻止了这个默认跳转进入到连接对应的页面
                                                                                          */
                                                                                          //alert(event.target.innerText);
                                                                                          console.log(e.target.innerText);
                                                                        },
                                                                        showInfo(e) {
                                                                                          /*
                                                                                             在里面的div的上面点击事件上
                                                                                             使用stop的修饰符会阻止子元素
                                                                                             向父元素冒泡
                                                                                          */
                                                                                          //alert("点击了div");
                                                                                          alert(e.target.innerText);
                                                                        },
                                                                        showbtn() {
                                                                                          //once事件只触发一次
                                                                                          alert("只点击一次按钮");
                                                                        },
                                                                        showMsg(msg) {
                                                                                          //capture,事件的捕获模式
                                                                                          //捕获与冒泡相反，捕获是从父元素到子元素
                                                                                          console.log("MSG,div" + msg);
                                                                        },
                                                                        showSelf(event) {
                                                                                          /*
                                                                                              self修饰符，只有触发被操作的元素，
                                                                                              换种说法是就是只有event.target是
                                                                                              当前操作的元素时才触发事件
                                                                                          */
                                                                                          console.log(event.target);
                                                                        },
                                                                        wheelScroll() {
                                                                                          //事件的默认行为立即执行，无需等待事件回调执行完毕
                                                                                          //如果不加的话，就会等待回调执行完再处理滚轮事件
                                                                                          for(let i = 0;i<100000;i++){
                                                                                                            console.log('#');
                                                                                          }
                                                                                          console.log("终于结束了#");
                                                                        },
                                                                        wheelScroll1(){
                                                                                          //如果是scroll滚动条滚动事件，效果和wheel加了passive修饰符一样
                                                                                          for(let i = 0;i<100000;i++){
                                                                                                            console.log('@');
                                                                                          }
                                                                                          console.log("终于结束了@");             
                                                                        }
                                                      }
                                    });

                  </script>

</body>

</html>