事件修饰符

默认冒泡

默认情况下,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 条评论
登录 后参与评论

相关文章

来自专栏编程

前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

21850
来自专栏闻道于事

第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

36480
来自专栏李蔚蓬的专栏

3.2 自定义控件基础 之 View的测量

在现实生活中,如果我们去画一个图形,就必须知道它的大小和位置。Android系统在绘制View之前也必须对View进行测量,即告诉系统该画一个多大的View。这...

9830
来自专栏Golang语言社区

go语言文件正则表达式搜索功能示例

package main import ( "fmt" "os" "path/filepath" "regexp" ...

36450
来自专栏从零开始学自动化测试

Selenium2+python自动化65-js定位几种方法总结

前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一、以下总结了5种js定位的方法 除了id是定位到的是单个elemen...

34570
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(3)——操作测试对象

30760
来自专栏栗霖积跬步之旅

HTML基础上

知识点一:HTML Hyper Text Markup Language  超文本标记语言。  HTML标准结构: < ! doctype html> 声...

24070
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

9040
来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

21490
来自专栏软件开发

PowerPoint基础

一、基础 默认后缀ppt,pptx office2003和以后的版本只支持ppt, 可以将pptx另存为ppt97-2003 ? 二、修改PPT尺寸 ? 三、新...

24990

扫码关注云+社区

领取腾讯云代金券