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>

猜你喜欢

转载自blog.csdn.net/qq_39239110/article/details/87820466