zoukankan      html  css  js  c++  java
  • vue2.0阻止事件冒泡

    <!--picker弹窗-->
    <transition name="fade">
    <div class="picker_wrap" v-show="roomSelectShow" @click="cancelSelect">
    <div class="picker_alert" @click.stop>
    <div class="picker_header ofh">
    <span class="fl" @click="toRoomManagement">编辑</span>
    <span class="fr" @click="confirmRoom">确定</span>
    </div>
    <mt-picker :slots="slots" class="" @change="onValuesChange"></mt-picker>
    </div>
    </div>
    </transition>

    出现的问题:点击picker_alert元素也会触发picker_wrap绑定的click事件

    解决办法:阻止事件冒泡

    在picker_alert元素加上@click.stop


    事件修饰符

    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

    为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    <!-- 阻止单击事件冒泡 -->
    <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>

     

     

     

     

     

     

     

     

     

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

     
  • 相关阅读:
    noi.ac 集合
    NOI2019 SX 模拟赛 no.5
    带花树草解
    UR#13 SRAND
    【51nod1847】 奇怪的数学题
    ●POJ 3237 Tree
    ●BZOJ 2049 [Sdoi2008]Cave洞穴勘测
    ●BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊
    ●POJ 2983 Is the Information Reliable?
    ●POJ 3378 Crazy Thairs
  • 原文地址:https://www.cnblogs.com/yzhihao/p/7262218.html
Copyright © 2011-2022 走看看