Vue 事件修饰符.self的用法

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在 该元素上的事件才会被调用,因为它看起来 与.stop好像有一点像,但其实他们作用的对象不同。一下举个简单例子。

<div id="_Red" v-on:click="doThat1(event)" style="width: 500px;height: 500px;background: red;">

                <div v-on:click="doThat(event)" id="_Blue" style="width: 200px;height: 200px;background: blue;">

                </div>


            </div>

vue 实例方法

doThat:function(e){

                        alert('doThat'+$(e.target).attr('id'));

                    },
doThat1:function(e){

                        alert('doThat1'+$(e.target).attr('id'));

                    }

我们把两个DIV分为blue和red,blue是red的子元素,在我没有加任何修饰符的时候,当我点击blue的时候,输出的结果是

doThat_Blue
doThat1_Blue
//这里要说明一下,事件冒泡除了事件触发以外传入的事件对象也是事件源的对象,并非是事件绑定的元素,因此两次输出的都是Blue而不是一次Blue一次Red

1)当给Blue加上.stop修饰符的时候,阻止了子元素的冒泡事件,所以Red并不会触发事件。

2)而如果我给Red加上.self修饰符,去掉Blue的stop修饰符的时候,点击子元素(Blue)会发现,输出doThat_Blue就不会再输出,这个结果看上去跟1)中的阻止冒泡事件是一致的,是因为.self只执行直接作用在该元素身上的事件,所以它相当于忽略了 其他元素的冒泡或者捕获事件。但是这种忽略只局限于自身。

所以,为了避免一些会被冒泡事件影响,加上修饰符.self是很有用的

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值