精华内容
下载资源
问答
  • 事件修饰符

    2021-04-15 20:34:07
    事件修饰符 顾名思义,“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符,修饰符是由点开头的指令后缀来表示的。 事件修饰符有: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件...

    事件修饰符
    顾名思义,“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符,修饰符是由点开头的指令后缀来表示的。

    事件修饰符有:

    .stop 阻止冒泡
    .prevent 阻止默认事件
    .capture 添加事件侦听器时使用事件捕获模式
    .self 只当事件在该元素本身(不是子元素)触发时回调
    .once 事件只触发一次

    1.阻止冒泡

    <div id="app" @click=clickDiv()>
       <button @click="clickButton()">点击</button>
    </div>
    <script>
       var vm=new Vue({
          el:"app",
          data:{},
          methods:{
             clickDiv(){
                console.log("点击了div")
             },
             clickButton(){
             console.log("点击了button")
             }
          }
       })
    </script>
    

    当点击按钮的时候,浏览器控制台除了会输出“点击了button”还会输出“点击了div”,这是因为button按钮是div里的元素节点,当你点击button的时候,事件会向上冒泡,触发包含它的父元素所定义的事件,这就是冒泡事件。
    如果想阻止冒泡事件就需用到“.stop”修饰符。

    <button @click.stop="clickButton"></button>
    

    2.阻止默认事件
    什么是默认事件?如:点击a链接自动进行跳转、点击submit按钮自动提交表单等。
    这里以a链接为例:

    <body>
       <div id="app">
          <a href="https://www.baidu.com" @click.prevent="linkclick()">有问题,问百度</a>
       </div>
       <script>
          new Vue({
             el:"app",
             data:{},
             methods:{
                linkclick(){
                   console.log("点击了a链接")
                }
             }
          })
       </script>
    </body>
    

    加上.prevent修饰符后,a链接不能进行跳转,但是仍然可以触发click事件。

    3.事件捕获
    还记得冒泡事件中触发的顺序吗?即:先触发button按钮的点击事件,然后再触发button父元素div的点击事件;如果我想点击button之后先触发父元素div的点击事件,然后再触发子元素button的点击事件呢?

    <div id="app" @click.capture="clickDiv">
       <button @click="clickButton"点击></button>
    </div>
    

    即:在事件触发中进行捕获,优先执行含有".caputre"修饰符的事件。

    4.只当事件在该元素本身触发时触发回调

    <div id="app" @click.self="clickDiv">
       <button @click="clickButton">点击</button>
    </div>
    

    我们在父元素div里加了".self",这样父元素的点击事件只有在点击自身元素的情况下才可以触发,点击其他任何元素(如子元素button)都不会触发包含修饰符".self"的元素事件。

    5.事件只触发一次

    <body>
       <div id="app">
          <a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题,问百度</a>
       </div>
       <script>
          el:"#app",
          data:{},
          methods:{
             clicklink(){
             console.log("点击了a链接")
             }
          }
       </script>
    </body>
    
    • 这里a链接点击事件使用了两个事件修饰符,说明事件修饰符可以并列使用。
    • 这里的修饰符".once"的作用是让默认阻止行为(.prevent)只生效一次,所以当我们第一次点击a链接的时候,浏览器控制台会输出"点击了a链接",但是页面不会跳转,当我们再次点击a链接的时候页面会跳转到百度页面,这就是".once"修饰符的作用。
    • “.prevent"和”.once"的位置调换后,即:@click.once.prevent=“clicklink()”,执行的结果是不一样的。
    展开全文
  • Vue教程03(事件修饰符)

    万次阅读 多人点赞 2019-07-06 18:18:05
      本文我们来详细介绍下vue中的事件修饰符 Vue事件修饰符 事件修饰符概览 修饰符 说明 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素...

      本文我们来详细介绍下vue中的事件修饰符

    Vue事件修饰符

    事件修饰符概览

    修饰符 说明
    .stop 阻止冒泡
    .prevent 阻止默认事件
    .capture 添加事件侦听器时使用事件捕获模式
    .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
    .once 事件只触发一次

    事件修饰符具体介绍

    .stop

      .stop用来防止冒泡,我们先来看看冒泡的场景

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <style>
                .inner {
                  height: 150px;
                  background-color: gold;
                }
            
                .outer {
                  padding: 40px;
                  background-color: red;
                }
              </style>
    </head>
    <body>
        
        <div id="app">
                <div class="inner" @click="div1Handler">
                        <input type="button" value="点击" @click="btnHandler">
                </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data: {
    
                },
                methods: {
                    div1Handler() {
                        console.log('这是触发了 inner div 的点击事件')
                    },
                    btnHandler() {
                        console.log('这是触发了 btn 按钮 的点击事件')
                    }
                }
            })
        </script>
    </body>
    </html>
    

    页面操作效果

    在这里插入图片描述

    我们看到不光点击按钮的点击事件触发了,而且父容器div的点击事件也触发了,这时我们就可以使用.stop来阻止这个冒泡了,如下

    在这里插入图片描述

    在访问测试

    在这里插入图片描述

    通过输出可以看到点击事件没有往上冒泡了!

    .prevent

      阻止默认行为,我们可以通过a标签来演示,先看未阻止的情况

    在这里插入图片描述

    看下演示效果
    在这里插入图片描述

    我们可以看到先触发了我们的弹出框,然后页面跳转了,这时我们可以阻止默认行为

    在这里插入图片描述

    再看效果

    在这里插入图片描述

    从效果中可以看出默认的跳转事件被阻止了!

    .capture

      实现捕获触发事件的机制,即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
    就是谁有该事件修饰符,就先触发谁。 先看没有该修饰符的操作

    在这里插入图片描述

    在这里插入图片描述

    输出我们可以看到先触发的 按钮的点击事件,然后触发的div的点击事件,现在我们绑定 .capture

    在这里插入图片描述

    在这里插入图片描述

    通过输出可以看到是先触发的 绑定的有".capture"的div,然后触发的btn按钮。

    .self

      实现只有点击当前元素时候,才会触发事件处理函数

    在这里插入图片描述

    效果演示:

    在这里插入图片描述

    .once

      只触发一次事件处理函数

    在这里插入图片描述

    在这里插入图片描述

    通过输出效果可以看出阻止默认行为只有效了一次!

    .stop 和 .self 的区别

    先看.stop的行为:

    在这里插入图片描述

    点击btn按钮,阻止冒泡,我们看效果

    在这里插入图片描述

    通过演示可以看到点击按钮,两个div的事件都没有触发。

    再看.self

    在这里插入图片描述

    在这里插入图片描述

    通过演示可以看出self只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为。

    展开全文
  • 事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .self 只有在自身触发才起效 .once 只生效一次 表单元素修饰符 v-model.修饰符=“” .lazy 输入框失焦之后...

    注意 修饰符可连缀

    事件修饰符 @事件名.修饰符=“”

    .prevent 拦截默认事件
    .stop 拦截冒泡事件
    .capture 改变事件执行顺序
    .self 只有在自身触发才起效
    .once 只生效一次

    表单元素修饰符 v-model.修饰符=“”

    .lazy 输入框失焦之后才更改绑定内容
    .trim 去除收尾空格
    .number 转换输入类型为数值型

    按键修饰符 @keydown.修饰符=“”

    keyup、keydown

    .left 键盘左键

    .right 键盘右键

    .up 键盘上键

    .down 键盘下键

    .enter 键盘回车键

    .esc 键盘esc键

    .delete 键盘退格键

    .space 键盘空格键

    输入框获取焦点后,对应的修饰符才会起作用

    展开全文
  • 之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
  • vue中的事件修饰符 修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制 常用的事件修饰符 .stop .prevent .capture .self .once .passive 1.事件修饰符 stop修饰符 用来阻止事件冒泡 事件...

    vue中的事件修饰符

    修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

    常用的事件修饰符

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    • .passive

    1.事件修饰符

    stop修饰符

    用来阻止事件冒泡

    事件冒泡
    详情:https://www.jianshu.com/p/3f0ee1f6ec30

    prevent 事件修饰符

    用来阻止标签的默认行为

    self 事件修饰符

    用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

    once 事件修饰符

    once 一次 作用: 就是让指定事件只触发一次

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01.Vue中事件修饰符使用</title>
        <style>
            .aa{
                background: red;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
    <div id="app">
    
        <!--只触发标签自身的事件-->
        <div class="aa" @click.self="divClick">
    
            <!--用来阻止事件冒泡-->
            <input type="button" value="按钮" @click.stop="btnClick">
    
    
            <input type="button" value="按钮1" @click="btnClick1">
    
    
        </div>
    
    
        <hr>
    
        <!--
        .prevent : 用来阻止事件的默认行为
        .once    : 用来只执行一次特定的事件
        -->
        <a href="http://www.baidu.com/" @click.prevent.once="aClick">百度</a>
    
    </div>
    
    
    
    
    <div id="app2" class="aa">
    
    
    <!--事件冒泡-->
        <div @click="aconsole1">
            <input type="submit" value="app2-2" @click="aconsole2">
        </div>
    
    </div>
    
    
    
    
    
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    
    <script>
        const app = new Vue({
            el: "#app",
            data: {},
            methods: {
                btnClick(){
                    alert('button被点击了');
                },
                divClick(){
                    alert('div被点击了');
                },
                aClick(){
                    alert('a被点击了');
                },
                btnClick1(){
                    alert('btn1被点击了');
                }
            }
        });
    
    
        const app2 = new Vue({
            el:"#app2",
            data:{},
            methods: {
                aconsole1: function () {
                    console.log("div被触发了");
                    alert('div');
                },
                aconsole2: function () {
                    console.log("按钮被触发了");
                    alert('按钮');
                }
    
            }
        })
    </script>
    </body>
    </html>
    



    按键修饰符

    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right

    如 enter 回车键

    用来在触发回车按键之后触发的事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02.按键修饰符</title>
    </head>
    <body>
    <div id="app">
    
    
        <!--
            enter 按键修饰符  在回车之后触发的事件
        -->
    
        <input type="text" v-model="msg" @keyup.enter="keyups">
    
        <input type="text" @keyup.left="keytabs">
    
    </div>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg:"",
            },
            methods: {
                keyups(){
                    console.log(this.msg);
                },
                keytabs(){
                    console.log("left键触发");
                }
            }
        });
    </script>
    </body>
    </html>
    
    展开全文
  • 事件修饰符,顾名思义就是处理事件的修饰符 1.修饰符预览 .stop //阻止事件冒泡 .prevent //组止默认时事件(例如a标签的默认跳转) .capture //监听元素并优先触发在该元素上的事件(当元素发生冒泡时,谁有该事件...
  • 事件修饰符 原因 我们知道在事件处理中往往我们需要阻止它继续冒泡或者阻止它的默认事件,这里就需要在事件处理函数中调用event.stopPropgation() 或者 event.preventDefault(),那vue为了让事件处理函数只处理数据...
  • 事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如: event.preventDefault() 或 event.stopPropagation()。 Vue.js 通过由点 . 表示的指令后缀来调用修饰符。 .stop - 阻止冒泡 .prevent - 阻止...
  • 事件修饰符 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop ="doThis"></a> <!-- 提交事件不再重新加载页面 --> <form v-on:submit.prevent="onSubmit"></from> <!-- ...
  • 事件修饰符:(使用修饰符时,顺序很重要;相应类型的代码会顺序产生) 事件修饰符:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰...
  • 1.事件修饰符是由点开头的指令后缀来表示的。 .stop .prevent .capture .self .once .passive 注意:不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,703
精华内容 1,881
关键字:

事件修饰符