stop修饰符

阻止冒泡行为

可以在函数中利用$event传参通过stopPropagation()阻止冒泡

通过直接在元素中的指令中添加 .stop

prevent修饰符

阻止默认行为

可以在函数中利用$event传参通过preventDefault()阻止默认行为

通过直接在元素中的指令中添加 .prevent

 其他的事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

事件修饰符可以串联使用，串联的顺序不一样，所表示的意思也不同

例如  .prevent.selt 表示阻止所有默认事件

.self.prevent表示只阻止自身默认事件

事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent的更多相关文章

  1. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  2. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

  3. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  4. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  5. Vue学习之路第八篇：事件修饰符

    学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...

  6. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  7. Vue 事件的基本使用 && 事件修饰符

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  8. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  9. Vue.js-03：第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

随机推荐

  1. Nginx 解析漏洞复现

    一.漏洞描述 该漏洞与nginx.php版本无关,属于用户配置不当造成的解析漏洞 二.漏洞原理 1.由于nginx.conf的如下配置导致nginx把以'.php'结尾的文件交给fastcgi处理,为 ...

  2. ubuntu16.04搭建LAMP(独立安装)

    修改APT源 备份原文件source.list sudo cp /etc/source.list /etc/source.list.bak 修改source.list sudo vi /etc/sou ...

  3. Hbase启动报java异常

    在conf文件夹下的hbase-env.sh文件中的j添加ava_home的环境变量, ******************************************************** ...

  4. 面试官：小伙子，给我说一下Java 数组吧

    Java 数组 Java 语言中提供的数组是用来存储固定大小的同类型元素. 1.声明数组变量 首先必须声明数组变量,才能在程序中使用数组. dataType[] arrayRefVar; // 首选的 ...

  5. 怎么用MindManager自带的模板和设计画思维导图

    小编知道大家平时工作学习都很忙,思维导图能完成的效率越高越好.所以今天,小编就为大家介绍两个能高效使用思维导图软件完成制作思维导图的小技巧.保证内容充实美观,还不费时间. 一.使用模板 打开MindM ...

  6. api4excel - 接口自动化测试excel篇

    api4excel - 接口自动化测试excel篇 工作原理: 测试用例在excel上编辑,使用第三方库xlrd,读取表格sheet和内容,sheetName对应模块名,Jenkins集成服务发现服务 ...

  7. 2020.7.19 区间dp阶段测试

    打崩了-- 事先说明,今天没有很在状态,所以题解就直接写在代码注释里的,非常抱歉 T1 颜色联通块 此题有争议,建议跳过 题目描述 N 个方块排成一排,第 i 个颜色为 Ci .定义一个颜色联通块 [ ...

  8. [BUGCASE]Webpack打包报JavaScript堆内存泄漏的错误

    一.问题描述 执行npm run build之后报错: 报错信息: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript he ...

  9. Android动画系列之属性动画

    原文首发于微信公众号:jzman-blog,欢迎关注交流! 属性动画相较帧动画和补间动画更强大,帧动画和补间动画只能应用于 View 及其子类,而属性动画可以修改任何对象的属性值,属性值可在指定的一段 ...

  10. 七牛云实现前端js上传实现办法

    1.七牛云上传前台页面 1.1 安装相关包 npm install --save jquery@1.12.1 # 安装jquery 1.2 index.html 引入qiniu.min.js < ...