zoukankan      html  css  js  c++  java
  • vue修饰符

    <body>
        <div id="app" @click.prevent=""clickme>
            <section id="section" @click.stop="clickme">
                <div id="div" @click.self="clickme">
                    <span id="span" @click.capture="clickme">
                        <p id="p" @click.once="clickme">
                            用鼠标双击我,看看事件的传递真正顺序。
                        </p>
                    </span>
                </div>
            </section>
            点击事件的响应顺序如下:{{message}}
        </div>
    </body>

    鼠标双击之后执行顺序:span->p->section->span->section

    上面各个修饰符的作用:

        .prevent: 提交事件不再重载页面

        .stop: 阻止单击事件冒泡

        .self: 当事件发生在该元素本身而不是子元素的时候会触发

        .capture: 事件侦听,事件发生的时候会调用

        .once: 跟v-once作用类似,只渲染一次,第二次不会执行

    解析:

    第一次点击:span有事件监听,所以最先执行的是它,然后是事件发生的元素本身<p>,接着span执行了跳过,然后到了内层的div,由于是.self,而事件不是在div本身,所以不执行,最后到section,由于有.stop冒泡阻止,所以执行到这里就停止了。最外层的div不会执行。

    span->p->section

    第二次点击,同样是先到span,由于<p>是.once,只被渲染一次,所以第二次不会执行,跳过了span,跳过了div,到了section......

    span->section

    后面的不管多少次点击,到时出现span->section的结果。

    本文转载:http://www.2cto.com/kf/201703/615547.html

  • 相关阅读:
    SQL Server用户和角色
    小草手把手教你 LabVIEW 串口仪器控制——VISA 串口配置
    数据库的概念
    域对象
    session
    cookie
    表单
    HttpServletResponse
    JavaWeb核心之Servlet
    Tomcat服务器
  • 原文地址:https://www.cnblogs.com/pfyblog/p/6894109.html
Copyright © 2011-2022 走看看