美文网首页
事件修饰符

事件修饰符

作者: 秋分落叶 | 来源:发表于2019-06-10 10:59 被阅读0次

    <div style="height: 150px;background-color: aqua" @click="divClick">

      <input type="button" value="点我" @click="btnClick">

    </div>

    btnClick divClick  都会调用  因为冒泡机制 先执行btnClick后执行divClick

    <div style="height: 150px;background-color: aqua" @click="divClick">

      <input type="button" value="点我" @click.stop="btnClick">

    </div>

    只会调用btnClick 方法  因为.stop阻止了冒泡

    <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

    .prevent可以阻止默认的事件  只调用linkClick事件   不跳转链接


    <div style="height: 150px;background-color: aqua" @click.capture="divClick">

      <input type="button" value="点我" @click="btnClick">

    </div>

    .capture  捕获事件 先调用父类方法divClick    再去执行btnClick

    <div style="height: 150px;background-color: aqua" @click.self="divClick">

      <input type="button" value="点我" @click="btnClick">

    </div>

    .self 只有点击自己才会执行divClick事件   冒泡 捕获到它的都不行    但是冒泡 捕获只阻止自己的   不会阻止他父类的冒泡 捕获

    .stop阻止了冒泡  是自己以及他的父类的

    <div style="height: 150px;background-color: aqua" @click.self="divClick">

      <input type="button" value="点我" @click.once="btnClick">

    </div>

    .once  只能执行一次

    相关文章

      网友评论

          本文标题:事件修饰符

          本文链接:https://www.haomeiwen.com/subject/knbaxctx.html