Vue——事件修饰符

news2024/11/24 12:43:58

文章目录

  • 前言
  • 阻止默认事件 prevent
  • 阻止事件冒泡 stop

前言

在官方文档中对于事件修饰符有一个很好的说明,本篇文章主要记录验证测试的案例。

官方文档 事件修饰符

阻止默认事件 prevent

在js原生的语言中,可以根据标签本身的事件对象进行阻止默认事件操作,如下所示:

<template>
    <h1>阻止默认事件</h1>
    <a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickTest1(e){
        	// js 原生 事件对象 方法 实现阻止默认事件
            e.preventDefault();
            console.log("点击了!");
        }
    }
}
</script>

<a>标签,增加href属性后,浏览器点击当前连接即可进行跳转操作,若只想点击后触发日志打印或其他操作,但不想跳转,则可以采取e.preventDefault() 进行默认事件的阻止。
在这里插入图片描述


Vue中有更加简单的实现方式,只需要在对应v-on绑定的click方法后增加对应的标识即可。如:@click.prevent="xxx"

<template>
    <h1>阻止默认事件</h1>
    <a @click="clickTest1" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
    <br>
    <hr>
    <a @click.prevent="clickTest2" href="https://writing-bugs.blog.csdn.net/">专注写bug csdn</a>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickTest1(e){
            e.preventDefault();
            console.log("点击了!");
        },
        clickTest2(){
            console.log("点击了2!");
        }
    }
}
</script>

在这里插入图片描述

阻止事件冒泡 stop

触发子级元素的事件的同时,也触发了父级元素的事件。

冒泡通常出现在嵌套中,比如div有个点击事件,其内有个其他的标签,也有一个点击事件。如下所示。

<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(){
            console.log("点击了 p!");
        }
    }
}
</script>

当点击对应的p标签的文字后,控制台中将打印如下的信息。
在这里插入图片描述
如何想要只触发p标签的点击事件,但不想触发外层的其他点击事件,这种如何实现呢?

在js原生语法中,可以采取e.stopPropagation() 进行事件冒泡的阻止操作。

比如:

<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(e){
            // js 原生阻止事件 冒泡
            e.stopPropagation();
            console.log("点击了 p!");
        }
    }
}
</script>

在这里插入图片描述
在vue中有一个更为简单的方式实现,直接在对应事件后增加.stop标识。

<template>
    <h1>阻止事件冒泡</h1>
    <div @click="clickDiv">
        <p @click.stop="clickP">666666</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    methods:{
        clickDiv(e){
            console.log("点击了 div!");
        },
        clickP(e){
            // js 原生阻止事件 冒泡
            //e.stopPropagation();
            console.log("点击了 p!");
        }
    }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1714496.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数组-给出最大容量,求能获得的最大值

一、问题描述 二、解题思路 这个题目其实是求给出数组中&#xff0c;子数组和不大于M中&#xff0c;和最大值的子数组。 求子数组使用双指针就可以解决问题&#xff0c;相对比较简单。&#xff08;如果是子序列&#xff0c;则等价于0-1背包问题&#xff0c;看题目扩展中的问题…

C++笔试强训day36

目录 1.提取不重复的整数 2.【模板】哈夫曼编码 3.abb 1.提取不重复的整数 链接https://www.nowcoder.com/practice/253986e66d114d378ae8de2e6c4577c1?tpId37&tqId21232&ru/exam/oj 按照题意模拟就行&#xff0c;记得从右往左遍历 #include <iostream> usi…

Vue——计算属性 computed 与方法 methods 区别探究

文章目录 前言计算属性的由来方法实现 计算属性 同样的效果计算属性缓存 vs 方法 前言 在官方文档中&#xff0c;给出了计算属性的说明与用途&#xff0c;也讲述了计算属性与方法的区别点。本篇博客只做自己的探究记录&#xff0c;以官方文档为准。 vue 计算属性 官方文档 …

彻底理解浏览器的进程与线程

彻底理解浏览器的进程与线程 什么是进程和线程&#xff0c;两者的区别及联系浏览器的进程和线程总结浏览器核心进程有哪些浏览器进程与线程相关问题 什么是进程和线程&#xff0c;两者的区别及联系 进程和线程是操作系统中用于管理程序执行的两个基本概念进程的定义及理解 定义…

PHPSTOM配置Laradock,xdebug,phpunit

原理图&#xff1a; 片面理解&#xff1a; phpstorm启用一个9000端口&#xff0c;这个端口用来接收到信息后&#xff0c;启用xdebug功能。服务器端(docker), 当客户端访问laravel项目域名后, 并读取xdebug.ini的配置, 把调试的请求数据, 向配置里面的端口发送消息, 配置里面的端…

QGIS开发笔记(三):Windows安装版二次开发环境搭建(下):将QGis融入QtDemo,添加QGis并加载tif遥感图的Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139136356 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

如何在phpMy管理对Joomla后台的登录密码进行重置

本周有一个客户&#xff0c;购买Hostease的虚拟主机&#xff0c;询问我们的在线客服&#xff0c;如何在phpMy管理对Joomla后台的登录密码进行重置&#xff1f;我们为用户提供相关教程&#xff0c;用户很快解决了遇到的问题。在此&#xff0c;我们分享这个操作教程&#xff0c;希…

​用 ONLYOFFICE 宏帮你自动执行任务:介绍与教程

使用 ONLYOFFICE 宏&#xff0c;可以来自动实现一些操作节省更多时间和精力。在本文中&#xff0c;我们集合了一些关于宏的教程&#xff0c;带您了解宏的工作原理&#xff0c;以及一些实例展示。 什么是 ONLYOFFICE 宏 如果您是一名资深 Microsoft Excel 用户&#xff0c;那么…

大数据报告有什么作用?查询方式一般有几种?

随着互联网金融的飞速发展&#xff0c;网络借贷已经成为了一种常见的融资方式。然而&#xff0c;如何在众多的平台中做出正确的选择&#xff0c;避免风险并实现最大利益&#xff0c;这就需要一份具有参考价值的大数据报告。本文将详细阐述大数据报告的作用及查询方式的几种方式…

ROS2贪吃龟练习工程

本文是ROS2基础知识的综合小应用&#xff0c;练习如何创建工作包&#xff0c;创建Node&#xff0c;定义Topic和Service&#xff0c;以及通过LaunchFile启动多个节点。基础知识可以参考&#xff1a;ROS2基础编程&#xff0c;ROS2 Topics和Services&#xff0c;ROS2 LaunchFile和…

模拟集成电路(5)----单级放大器(共栅级)

模拟集成电路(5)----单级放大器&#xff08;共栅级&#xff09; 有一些场合需要一些小的输入电阻&#xff08;电流放大器&#xff09; 大信号分析 − W h e n V i n ≥ V B − V T H ∙ M 1 i s o f f , V o u t V D D − F o r L o w e r V i n I d 1 2 μ n C o x W L ( V…

matlab安装及破解

一、如何下载 软件下载链接&#xff0c;密码&#xff1a;98ai 本来我想自己生成一个永久百度网盘链接的&#xff0c;但是&#xff1a; 等不住了&#xff0c;所以大家就用上面的链接吧。 二、下载花絮 百度网盘下载速度比上载速度还慢&#xff0c;我给充了个会员&#xff0c…

java调用远程接口下载文件

在postman中这样下载文件 有时下载文件太大postman会闪退&#xff0c;可以通过代码下载&#xff0c;使用hutool的http包

中华活页文选高中版投稿发表

《中华活页文选&#xff08;高中版&#xff09;》创刊于1960年&#xff0c;是中宣部所属中国出版传媒股份有限公司主管、中华书局主办的国家级基础教育期刊&#xff0c;曾获得“中国期刊方阵双效期刊”、国家新闻出版广电总局推荐的“百种优秀报刊”等荣誉称号。本刊以高中学科…

WAMP无法启动mysql

一种原因是原来安装过mysql,mysql默认是自启动的&#xff0c;而WAMP内置mysql会发生冲突&#xff0c;所以 解决方法&#xff1a; winR 输入 services.msc 将mysql关闭&#xff0c;并设为手动模式

扒出秦L三个槽点,我不考虑买它了

文 | Auto芯球 作者 | 雷慢 比亚迪的有一个王炸“秦L”&#xff0c;再一次吸引了我注意力&#xff0c; 我上一辆车刚卖不久&#xff0c;最近打算买第二辆车&#xff0c; 二手车和新车都有在看&#xff0c; 我又是一个坚定的实用主义者&#xff0c; 特别是现在的经济环境不…

深入解析 JSONPath:从入门到精通

码到三十五 &#xff1a; 个人主页 在数据处理和交换领域&#xff0c;JSON已经成为了一种广泛使用的数据格式&#xff0c; 如何有效地查询和操作这些数据也变得越来越重要。在这种情况下&#xff0c;JSONPath 应运而生&#xff0c;成为了一种在JSON数据中定位和提取信息的强大工…

老师如何对付挑事儿的家长?

身为老师&#xff0c;你有没有遇到过这样的家长&#xff1a;孩子在学校里闹点小矛盾&#xff0c;或者作业分数有点争议&#xff0c;他们就气势汹汹地来找你&#xff0c;说你偏心&#xff0c;甚至在其他家长面前说三道四&#xff1f;面对这种爱“挑事”的家长&#xff0c;老师们…

Nacos 2.x 系列【12】配置加密插件

文章目录 1. 前言2. 安装插件2.1 编译2.2 客户端2.3 服务端 3. 测试 1. 前言 为保证用户敏感配置数据的安全&#xff0c;Nacos提供了配置加密的新特性。降低了用户使用的风险&#xff0c;也不需要再对配置进行单独的加密处理。 前提条件&#xff1a; 版本:老版本暂时不兼容&…

AI在肿瘤学临床决策中的应用:一种多模态方法

在临床肿瘤学领域&#xff0c;多模态人工智能&#xff08;AI&#xff09;系统通过解读各类医学数据&#xff0c;展现出提升临床决策的潜力。然而&#xff0c;这些模型在所有医学领域中的有效性尚未确定。本文介绍了一种新型的多模态医疗AI方法&#xff0c;该方法利用大型语言模…