Vue学习之事件修饰符

Vue学习之事件修饰符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只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106504.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mac打开idea无反应_idea安装完打不开

    mac打开idea无反应_idea安装完打不开前提纪要如果你是因为修改了idea.vmoptions配置文件后重启打不开请看此方法若不是请勿浪费时间首先我们找错误的方法找到访达—>应用程序—->找到你要打开的idea右键—->选择显示包内容—->Contents—->MacOS—->idea打开会跳出黑窗口请寻找报错信息每个人的不一样我的是说我的jdk版本信息对不上回想一下昨天改了配置文件的垃圾回收器可能改错了首先改这个目录的idea.vmop.

  • 分遗产

    分遗产

  • 微信开放平台开发——网页微信扫码登录(OAuth2.0)

    微信开放平台开发——网页微信扫码登录(OAuth2.0)

    2021年10月27日
  • fastjson的json字符串转List

    fastjson的json字符串转Listfastjson的json字符串转Listpom依赖<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>json字符串转List:JSONObject.paresArray(str,class)Str

  • 已知abc+cba=1333,其中a,b,c均为一位数,求abc的值

    已知abc+cba=1333,其中a,b,c均为一位数,求abc的值

  • 角速度与位移矢量叉乘_角速度叉乘角动量

    角速度与位移矢量叉乘_角速度叉乘角动量矢量导数——角速度与矢量的叉乘原创不易,路过的各位大佬请点个赞矢量叉乘,向量外积矢量导数——角速度与矢量的叉乘1.定理证明证明结论部分1.定理矢量的导数为角速度叉乘以该适量。这也是角速度的定义。角速度在一般意义上是一个二阶张量,不过由于这个张量满足某些约束条件,自由的分量个数恰好变成了3个,所以正好可以拼凑成一个三分量矢量。刚体绕定轴旋转时,角速度矢量的方向垂直于旋转平面,且按右手螺旋法则确定证明定义矢量在本体坐标系表示为rar_ara​,在旋转坐标系的表示为rbr_brb​,两个坐

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号