zoukankan      html  css  js  c++  java
  • 事件修饰符--.stop阻止冒泡事件--.prevent阻止默认行为(链接跳转)----事件修饰符可以串联使用---只触发一次.once

    <!-- 使用  .stop  阻止冒泡 -->
       <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click.stop="btnHandler">
        </div> 

    .prevent阻止默认行为(阻止链接跳转)

    <!-- 使用 .prevent 阻止默认行为 -->
     <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> 

    .capture捕获机制---先执行父标签,也就是上一级外层事件,在执行内部触发的事件,自外向内

    原本为由内向外-也就是冒泡事件--现在是由外向内触发

    <!-- 使用  .capture 实现捕获触发事件的机制 -->
    <div class="inner" @click.capture="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
    </div> 

    .self只有点击自己猜触发

     <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
        <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
        </div> 

    .once

     <!-- 使用 .once 只触发一次事件处理函数 -->
        <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> -->
     <!-- 演示: .stop 和 .self 的区别 -->
    <div class="outer" @click="div2Handler">
          <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
          </div>
        </div> 
    
        <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
    <div class="outer" @click="div2Handler">
          <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
          </div>
        </div> 
  • 相关阅读:
    part11-1 Python图形界面编程(Python GUI库介绍、Tkinter 组件介绍、布局管理器、事件处理)
    part10-3 Python常见模块(正则表达式)
    Cyclic Nacklace HDU
    模拟题 Right turn SCU
    状态DP Doing Homework HDU
    Dp Milking Time POJ
    区间DP Treats for the Cows POJ
    DP Help Jimmy POJ
    Dales and Hills Gym
    Kids and Prizes Gym
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11588072.html
Copyright © 2011-2022 走看看