VUE阻止冒泡事件很简单

最新推荐文章于 2024-03-15 13:43:03 发布
最新推荐文章于 2024-03-15 13:43:03 发布
阅读量333 收藏
点赞数
文章标签： vue.js html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjiaguo/article/details/108092824
版权

有两种方法

1、在v-on:后添加一个.stop修饰符能阻止所有的冒泡

2、在v-on:后添加一个.self修饰符 只能阻止自身的冒泡行为

<style>
.inner{
    height: 150px;
    background-color: #00ff00;
}
</style>
<body>
    <div id="app">
        <div class="inner" @click='divHandler'>
            <!-- 使用.stop阻止冒泡 -->
            <input type="button" value="点我"  @click.stop='btnHandler'> 
        </div>
    </div>
</body>
<script>
    var  vm = new Vue({
        el:'#app',
        data:{},
         methods:{
            divHandler:function(){
                console.log('div事件')
            },
            btnHandler:function(){
                console.log('button事件')
            }
         }
    })
</script>

 

 

家国MAX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-...此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
重新认识vue之事件阻止冒泡的实现
10-18
主要介绍了重新认识vue之事件阻止冒泡的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 阻止change事件冒泡
weixin_45150813的博客
08-08 3671
switch组件阻止事件冒泡
vue v-on事件修饰符..阻止默认行为/阻止冒泡,V-model修饰符
m0_45000011的博客
03-28 146
V-model修饰符。
vue生命周期函数原理解析，vue阻止事件冒泡方法实现
最新发布
景天科技苑
03-15 1627
生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
vue事件对象、冒泡、阻止默认行为
小牛牛的博客
02-15 2万+
事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
mpvue - 阻止事件冒泡
idomyway的博客
10-31 1065
前言     mpvue中 元素嵌套都有点击触发事件，那点击里面的元素也会触发容器的点击事件。 解决方法     在@click加上stop属性可以阻止冒泡的 事件冒泡是由内到外 div(@click="wrapClick") div(@click.stop="itemClick") ...
零基础学习Vue: 第6课 Vue的v-on点击事件阻止冒泡等：
舜岳的博客
04-14 397
零基础学习Vue: 第6课 Vue的v-on点击事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/np...
vue绑定的点击事件阻止冒泡的实例
11-29
首先我们来区分事件冒泡、事件捕获是什么 （1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> ...
vue中阻止冒泡事件
qq_40666120的博客
05-12 1万+
vue冒泡事件 事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止 <script> window.onload = function(){ var vm = new Vue({ el:'#app', data:{ }, met
阻止事件冒泡传播stopPropagation() 阻止自身默认行为preventdefault()
weixin_30633405的博客
09-26 273
stopPropagation 简单理解：子元素的点击事件 不会去触发父元素的点击事件 preventdefault 简单理解：当点击提交按钮时（submit） 阻止对表单的提交 转载于:https://www.cnblogs.com/qiuyagogo/p/9705179.html...
vue阻止事件冒泡
唔厌组的秋秋空间
08-19 3万+
再实际开发过程中我遇到了一个问题： 问题描述： 大致就是一个商品列表，点击里面的每条商品记录就能进入对应商品详情页，点击每条记录里面的步进器就可以对商品的数量进行修改，我给外层的DOM节点绑定了一个点击事件，用来触发跳转进入商品详情页的动作，步进器我用的是Vant UI的一个组件，绑定了一个change事件，这时候就会出现一个问题就是，每当我点击步进器对商品数量进行修改的时候，就会触发...
vue点击事件如何阻止事件冒泡以及取消默认事件
6块腹肌的博客
06-09 3万+
一、阻止事件冒泡方法： 在vue中，一般情况下我们是这样绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> @click=“事件名”，这是常规方法，但是如果需要阻止事件冒泡的话，可以在click后面加上 .stop，完整写法是：@click="event.stop"，用上面的例子的...
vue的hover事件
热门推荐
sunshine_ping的博客
05-10 14万+
&lt;template&gt; &lt;div class="container"&gt; &lt;ul class="row"&gt; &lt;template v-for="(item) in items"&gt; &lt;li @mouseover="selectStyle (item) " :class=&a
Vue如何阻止事件冒泡
麻球科技
03-02 2593
如何 解决 vue里面的 冒泡事件 方案如下： a v-on:click.stop="doThis">a>   form v-on:submit.prevent="onSubmit">form>   a v-on:click.stop.prevent="doThat">   form v-on:submit.p
clipboard冒泡 原生js复制
jycsj的博客
03-12 807
场景：在table行有一个按钮实现复制功能，但是和行点击事件冲突了，加个@click.stop？？ cliboard插件官方文档感觉介绍太少了，查了半天资料，我感觉这是挺常用的场景啊，网上也没啥解决方案，这插件不大行啊[doge] 因为每一行都有这个按钮，用了css选择器，这样娶不到eventgoutou copyListen() { this.clipboard = new ClipboardJS('.copy-json', { text: trigger =>
js基础总结(一)
李青林的博客
12-01 179
(一)节点的插入,移除,克隆<div id="father"> <div id="son"></div> </div> <div id="demo"></div> <input type="button" value="按钮" id="btn"/> <script> var btn = document.getElementById("btn"); var father =
vue中阻止@click事件冒泡
xiao白的博客
05-27 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, max...
vue 阻止事件冒泡
08-12
在Vue中，可以使用两种常用方法来阻止事件冒泡。一种方法是使用`event.stopPropagation()`方法，在事件处理函数中调用该方法可以阻止事件冒泡。例如，在父元素上添加点击事件，并在子元素的点击事件处理函数中调用`event.stopPropagation()`方法，即可实现阻止事件冒泡的效果。另一种方法是使用Vue的修饰符`.stop`，在事件绑定处使用`.stop`修饰符可以更简洁地实现阻止事件冒泡的功能。例如，在父元素上添加点击事件，并在子元素的点击事件绑定处使用`.stop`修饰符，即可阻止事件冒泡。所以，在Vue中要阻止事件冒泡，可以选择使用`event.stopPropagation()`方法或者Vue的修饰符`.stop`。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue阻止事件冒泡](https://blog.csdn.net/weixin_49203377/article/details/116933043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue 阻止事件冒泡常用的方法](https://blog.csdn.net/qq_42751978/article/details/130945593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值