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. mysql密码问题

    这位老哥的: 版权声明:本文为CSDN博主「csdn-华仔」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/ ...

  2. 掌握这些springboot的配置方式，让你工作效率翻个倍!

    springboot的多种配置方式 java配置主要靠java类和一些注解,比较常用的注解有: @Configuration :声明一个类作为配置类,代替xml文件 @Bean :声明在方法上,将方法 ...

  3. Elements-of-Python01_Input/Output

    (内容包括输入input,输出print,注释comment,预测类型转换eval,命名与赋值Name & Bestow) 输入Input 和 输出Print Python中利用input() ...

  4. Linux没有netstat和ifconfig命令问题

    安装了精简版命令行centos7系统,运行netsta查看端口和ifconfig查看IP命令都提示找不到命令. 解决方法: yum search ifconfig 通过yum search 这个命令我 ...

  5. web服务器是啥

    什么是web服务器 参考 https://www.cnblogs.com/zhaoyl/archive/2012/10/10/2718575.html 了解nginx之前,先了解下什么是web服务器吧 ...

  6. Python变量引用

    >>>a=3 >>>b=a >>>a=4 >>>b >>>3 >>>List1=[1,2,3 ...

  7. 【线程池】toString

    java.util.concurrent.RejectedExecutionException: Task com.personal.practice.jvm.Jstacktest$1@7d605a5 ...

  8. @Transactional自调用问题

  9. CentOS虚拟化尝试

    KVM ///确认cpu是否支持kvm,确认支持,主板还得开启VT和HT egrep '(vmx|svm)' --color=always /proc/cpuinfo ///yum安装rpm包 yum ...

  10. SQL，T-SQL简介

    SQL:  结构化查询语言(Structured Query Language), 简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系型数据库系 ...