3

vue里面如何阻止事件冒泡 - 阻止click事件冒泡方法总汇

 2 years ago
source link: https://www.fly63.com/article/detial/12157
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

更新日期: 2022-09-21阅读: 80标签: 事件分享

扫一扫分享

使用vue阻止子级元素的click事件冒泡。简单得:可以直接用stop

<div @click="test1()">    
<span @click.stop="test2()">按钮1</span>
<span>按钮2</span>
</div>

这样点击div里面的按钮1,就不会触发div绑定时间test1()方法。

可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件

@click="_stopPropagation($event)"
methods:{      
_stopPropagation(ev){
var _this = this;
ev.stopPropagation();
},
}

取消默认事件方法:

<div class="parent-wrapper" @click.prevent="clickWrapper">点这里</div>

阻止事件冒泡也要取消默认事件:

<div class="parent-wrapper" @click.stop.prevent="clickWrapper">点这里</div>

链接: https://www.fly63.com/article/detial/12157


Recommend

  • 178
    • 掘金 juejin.im 7 years ago
    • Cache

    vue面试题总汇

    vue面试题总汇 2017年11月06日 02:52 ·  阅读 86219

  • 27
    • 微信 mp.weixin.qq.com 4 years ago
    • Cache

    2020 年文章总汇

    以下是《一瓜技术》的 2020 年文章汇总, 共计 33 篇高质量原创文章 。 以此作为今年的元旦大礼包送给大家...

  • 4
    • www.fly63.com 3 years ago
    • Cache

    html前端面试题总汇

    内元素和块级元素的区别?行内元素:不会独立出现在一行,单独使用的时候后面不会有换行符的元素。eg:span, strong, img, a 等。这些元素,默认的高宽,总是其内容的高宽。并且,margin和padding值,只有左右有效。块级元素:独立在一行的元素...

  • 3
    • chegva.com 3 years ago
    • Cache

    详解Javascript事件冒泡机制

    详解Javascript事件冒泡机制 | CHEGVACHEGVA让我们面对现实 让我们忠于理想 ☘ 随机文章☯ 传统文化☺ 近期评论⌚ 博客统计♡ 友情链接

  • 6
    • www.yuexunjiang.me 3 years ago
    • Cache

    JavaScript 事件流:冒泡与捕获

    JavaScript 事件流:冒泡与捕获 2016-04-16 Saturday 事件流描述的是从页面中接收事件的顺序。在 JavaScript 中事件流有两种,一种是由 IE 开发团队提出的事件冒泡流,而另一种是 Netscape 提出...

  • 5

    uni-app关闭系统侧边滑动返回的方法总汇更新日期: 2022-03-18阅读量: 359标签: uniapp分享扫一...

  • 3

    上一篇章中,我们掌握了页面事件的基本操作,这次学习事件 API 的进阶和拓展用法了。 相关文章: 由重构进阶前端开发入门 (一) DOM 操作

  • 11

    css实现文字垂直展示的方法总汇更新日期: 2022-04-28阅读量: 313标签: ...

  • 2

    js删除字符串最后一个字符方法总汇更新日期: 2022-08-02阅读: 59标签: 

  • 9

    这篇文章主要介绍JavaScript通过多种方法来获取字符串中的第一个字符。1. charAt() 方法charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法。charAt(...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK