专栏首页coding事件修饰符

事件修饰符

默认冒泡

默认情况下,js的事件会向上冒泡,如:以下三个div元素:

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <div class="son" @click="catchSon"></div>
    </div>
</div>

当我们点击里层的div,会触发外层的div事件

let vm = new Vue({
    el: "#app",
    data: {
    },
    methods: {
        catchSon() {
            console.log('我还小,别抓我啊...');
        },
        catchFather() {
            console.log('我上有老,下有小,各位官爷,手下留情啊...');
        },
        catchGrandfather() {
            console.log('你们这些兔崽子,敢动我这把老骨头试下!');
        }
    }
})

具体代码

冒泡.gif

事件修饰符

vue提供了事件修饰符,可以修改默认的事件触发机制:

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once 事件只触发一次

.stop 为例:

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <!-- 阻止此元素向上冒泡 -->
        <div class="son" @click.stop="catchSon"></div>
    </div>
</div>

阻止冒泡.gif

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue.js组件间通信

    组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

    章鱼喵
  • vue.js通过路由实现经典的三栏布局

    章鱼喵
  • vue 组件基本使用

    组件是可复用的 Vue 实例,且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用

    章鱼喵
  • CSS3 3D转换

      x轴:水平向右 注意: x 右边是正值,左边是负值   y轴:垂直向下 注意: y 下面是正值,上面是负值   z轴:垂直屏幕 ...

    梨涡浅笑
  • Laravel删除产品-CRUD之delete(destroy)

      上一篇讲了Laravel编辑产品-CRUD之edit和update,现在我们讲一下删除产品,方法和前面的几篇文章类似,照着ytkah来操作吧

    ytkah
  • CSS动效集锦,视觉魔法的碰撞与融合(三)

    在一些杀毒或文件扫描类的软件上,我们可能会看到一些雷达扫描的UI样式,例如下图所示

    外婆的彭湖湾
  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • js拖拽

    用户7873631
  • H5C3综合案例

      1>给body添加 透视效果 perspective: 1000px;   2>给section 添加 大小,一定不要忘记添加 3d呈现效果控制里面的6个...

    梨涡浅笑

扫码关注云+社区

领取腾讯云代金券