1

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

 1 year 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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK