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. springboot使用swagger2生成开发文档

    一.引入jar包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox- ...

  2. 这些Servlet知识你一定要知道，金九银十大厂面试官都爱问

    前言 Servlet是服务器端的Java应用程序,可以生产动态Web页面.透过JSP执行过程可以知道JSP最终被编译成一个.class文件,查看该文件对应的Java类,发现该Java类继承自org.a ...

  3. MySQL如何实现万亿级数据存储？

    前言 业界对系统的高可用有着基本的要求,简单的说,这些要求可以总结为如下所示. 系统架构中不存在单点问题. 可以最大限度的保障服务的可用性. 一般情况下系统的高可用可以用几个9来评估.所谓的几个9就是 ...

  4. 思维导图iMindMap可以在哪些领域应用

    生活工作中你常常会遇到许多力所不能及的事情,感到无奈.茫然,这时候你急需一个帮手来帮你打破困境,思维导图就是这样的救世主,至于它有哪些力所能及的事情就是下面小编要跟你讲的. 你是否经常遇到过这样的情况 ...

  5. FL Studio中如何制作和混音Dutch Lead（上）

    Dutch Lead是电子音乐类型Dutch House以及Bigroom House中常用的Lead音色,这一篇文章中我将从制作和混音两方面来讲解Dutch Lead. (一).Dutch Lead ...

  6. 如何使用ABBYY FineReader 的用户模式？

    在运用ABBYY FineReader 15(Windows系统)进行文档识别时,用户可能会遇到识别的文档包含一些特殊字符或者其他软件无法识别的字体等情况,容易造成识别出现乱码的结果.在这种情况下,用 ...

  7. 下载器Folx如何实现排队下载功能

    用户在下载多个文件时,当然会希望这些文件都能同时下载,以达到短时间内完成下载任务的目的.但另一方面来说,同时下载过多文件,会分散带宽资源,降低了每个文件的下载速度,从而导致下载时间的延长. 为了实现多 ...

  8. 基于Python+requests搭建的自动化框架-实现流程化的接口串联

    框架产生目的:公司走的是敏捷开发模式,编写这种框架是为了能够满足当前这种发展模式,用于前后端联调之前(后端开发完接口,前端还没有将业务处理完毕的时候)以及日后回归阶段,方便为自己腾出学(mo)习(yu ...

  9. mongodb查询前10条

    mongo可以通过时间或者通过id来判断上一条记录或者下一条记录,我是通过id 前10条 db.数据库名称.find({ '_id': { '$lt': ids } }).sort({_id: -1} ...

  10. Java设计模式——观察者模式的灵活应用

    灵感来源于一个猪队友给我的题目 看到这个,我抓住的关键字是:任何子任务失败,要通知所有子任务执行取消逻辑. 这不就是消息广播吗?观察者模式! 干活 首先是收听者 package com.example ...