VUE的事件修饰符,once,prevent,stop,capture,self,passive

once,只执行一次
<div v-on:click.once='alert("1")'></div>
1
只有在第一次点击时会执行,再次点击不会起作用 
2. prevent 
阻止默认程序,比如form表单中的summit提交按钮,会自己提交,

 

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>


现在的submit会进行数据提交,和跳转

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>


prevent,直接不让你提交了,也不跳转,只是执行自己命名的函数,个人觉得这个修饰符使用的并不多,完全可以不做submit,我自己写个click更方便啊!! 
3. stop 
阻止函数的传递

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


此时点击子级的div会,先弹出2,再弹出1

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


点击子级的div,此时的执行结果是,先弹出1,再弹出2(capture的作用)

<div v-on:click.capture.stop='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


点击子级的div,此时的执行结果是只会弹出1(capture决定的执行顺序),不会执行alert(‘2’)

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


这样就只会弹出2,不会弹出1 了 
总之,stop就是你自己执行你的就好了,别去打扰别人。 
4. capture和self 

capture和self主要是函数执行顺序的问题

.capture先执行父级的函数,再执行子级的触发函数

<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


此时点击子级的div时,会先执行alert(‘1’),再执行alert(‘2’) 
self是只执行子级本身的函数

<div v-on:click.self='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>


此时点击子级的div会执行alert(‘2’),不会执行alert(‘1’)
 


5. passive与prevent相反,javascript中的preventDefault() 
passive就是专门用来跟他们作对的,使他们不起作用,同时,passive不能和prevent同时使用,prevent会失效,而且会警告!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值