zoukankan      html  css  js  c++  java
  • Vue学习笔记【6】——事件修饰符

    • .stop 阻止冒泡(阻止事件向外层冒泡)

    • .prevent 阻止默认事件(链接跳转、表单提交)

    • .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件)

    • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调

    • .once 事件只触发一次

    注意:

    1.once和prevent的先后顺序不会影响结果

    2.self和stop的区别

    四个div从内层到外层分别为:div1~div4,各绑定一个点击事件

    当点击div2时,会发生事件冒泡,依次触发了div2、div3、div4

    stop阻止了(使用该修饰符的元素引发的)所有的冒泡行为。但不能阻止其内层元素冒泡造成的其事件触发。

    例子:为div2添加stop修饰符,当点击div2时,不再产生div2引起的事件冒泡行为,只触发了div2;当点击div1时,div1会引发事件冒泡,导致div2的事件触发,但是不再继续冒泡,最终触发了div1和div2。

    self是阻止(冒泡到使用该修饰符的元素的本身的)冒泡行为。只有点击这个元素本身才会触发这个元素绑定的事件,然后继续向上冒泡。它内部元素的冒泡不会使它绑定的事件触发,但会继续往外冒泡。

    例子:为div2添加self修饰符,当点击div2时,触发了div2、div3、div4;当点击其内部的div1时,触发了div1,viv3,div4。

  • 相关阅读:
    flashdevelop生成swc库(转)
    SOG and COG spec
    [C]switch...case...一个case包含多个值的一种写法
    [C]赋值语句返回值
    Antenna知识整理
    SPI接口比IIC速度快的理解
    C语言代码的换行
    SRRC认证
    蓝牙协议分析(6)_BLE地址类型
    结构体变量和指针对成员的引用形式
  • 原文地址:https://www.cnblogs.com/superjishere/p/11878230.html
Copyright © 2011-2022 走看看