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)
blank

相关推荐

  • 冲刺阶段 – PMP易错概念(持续更新中)

    冲刺阶段 – PMP易错概念(持续更新中)文章目录1.基础概念2.整合管理3.范围管理4.进度管理5.成本管理6.质量管理7.资源管理8.沟通管理9.风险管理10.采购管理11.相关方管理1.基础概念1.“管理层在项目管理方面缺乏经验”不是项目失败的原因。管理层可以不懂项目管理,但项目经理必须要非常精通项目管理,这里还有一个假设就是组织拥有非常充分的组织过程资产,即便经验不足,也可以去学习和借鉴组织过程资产。2.子项目的划分,根据项目的复杂性来划分,以便更好的去管理与控制项目,子项目会细化工作,故增加工

  • 中国人口数据可视化_人口出生率预测

    中国人口数据可视化_人口出生率预测去年我国出生率跌破1%……全国出生人口创新低,负增长将提前,未来14年将有36776万人变老……人口下降螺旋一旦形成,一个传承了几千年的大华夏族,几百年内,即将在世界民族之林中,消亡……光看到这些标题就骇人视听。我国是世界人口大国,有14.1亿人口,出生率怎会跌破1%了呢?造成出生率下跌的原因是复杂多样的,不过出生率下跌已成事实。出生率创新低国家统计局日前发布《中国统计年鉴2021》,数据显示,2020年全国人口出生率为8.52‰,首次跌破10‰,创下了197

  • 薪酬与文化,坚硬与柔软

    薪酬与文化,坚硬与柔软

  • SSM 整合详细步骤

    SSM 整合详细步骤SSM整合第一章环境准备1、创建数据库和表结构createdatabasessm;createtableaccount(idintprimarykeyauto_increment,namevarchar(100),moneydouble(7,2),);2、创建Maven工程创建ssm_parent父工程(打包方式选择pom,必须的)创建ssm_web子模块(打包方式是war包)创建ssm_service子模块(打包方式是jar包)创建ssm_dao子模

  • 设备管理器里“SM总线控制器”、“其他PCI桥设备”驱动有问题

    设备管理器里“SM总线控制器”、“其他PCI桥设备”驱动有问题设备管理器里“SM总线控制器”、“其他PCI桥设备”驱动有问题

  • 嵌入式Linux移植USB网卡驱动「建议收藏」

    嵌入式Linux移植USB网卡驱动「建议收藏」硬件平台:realARM6410操作系统:fedorakernel2.6.33.3-85.fc13.i686.PAE交叉编译器:arm-none-linux-gnueabigccversion4.3.2WIFI模组:磊科NW336芯片realtek8188cus

发表回复

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

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