vue中事件修饰符的使用*

vue中事件修饰符有5种:
1. .stop 阻止冒泡
2. .prevent 阻止默认事件
3. .capture 添加事件侦听器时使用事件捕获机制
4. .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
5. .once 事件只触发一次
每种方法的使用及特点如实例中所示:

    <div class="inner" @click="divdisplay">
        <input type="button" value="戳他" @click="btnclick">
    </div>
    <!--.stop 阻止了button向外冒泡,只能触发自己的事件 -->
    <div class="inner1" @click="divdisplay">
            <input type="button" value="戳他" @click.stop="btnclick">
        </div>
        <!-- .prevent属性是使这个触发事件触发但是默认事件被阻止了-->
        <a href="http://www.baidu.com" @click.prevent="linkclick">有问题,找度娘</a>
        <!-- 点击当前元素时,才会触发事件处理函数 -->
    <div class="inner3" @click="divdisplay">
            <input type="button" value="戳他" @click.self="btnclick">
        </div>

</div>
<!-- .self 只会阻止自身的冒泡的触发,不会阻止其他的触发,但.stop 可以阻止该元素外的所有元素的触发-->


</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值