默认情况下,事件在h5页面会穿透传递,比如一div里面套一个div,点击上层div,下层div也会响应

要阻止事件穿透,使用event.stopPropagation();

代码示例:

<div @click="testout($event)>
<div @click="testin($event)"></div>
</div>
....... testin(event) {
......
event.stopPropagation();
},

vue中阻止事件穿透的方法的更多相关文章

  1. Windows Server 2008中关闭事件跟踪程序的方法

    Windows Server 2008跟Windows Server 2003一样,在关机的时候会弹出一个“关闭事件跟踪程序”窗口,当然微软这么做是处于安全的考虑啦,但是如果我们只是个人用用的话,那就 ...

  2. 在C++Builder中定义事件的实现方法

    ++Builder是由Borland公司推出的一款可视化集成开发工具.C++Builder的集成开发环境(IDE)提供了一系列可视化快速应用程序开发(RAD)工具,让程序员可以很轻松地建立和管理自己的 ...

  3. VUE中CSS样式穿透

    VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...

  4. Vue中的事件与常见的问题处理

    Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...

  5. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  6. Vue_(基础)Vue中的事件

    Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...

  7. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  8. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  9. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

随机推荐

  1. Java动态编译技术原理

    这里介绍Java动态编译技术原理! 编译,一般来说就是将源代码转换成机器码的过程,比如在C语言中中,将C语言源代码编译成a.out,,但是在Java中的理解可能有点不同,编译指的是将java 源代码转 ...

  2. 【原创】Dubbo 2.7.5在线程模型上的优化

    这是why技术的第30篇原创文章 这可能是全网第一篇解析Dubbo 2.7.5里程碑版本中的改进点之一:客户端线程模型优化的文章. 先劝退:文本共计8190字,54张图.阅读之前需要对Dubbo相关知 ...

  3. Docker学习(三)认识Docker和常用命令

    Docker学习(三)认识Docker和常用命令 Docker体系结构 docker服务端,作为服务的提供方,核心进程 docker daemon,所有docker命令都是通过这个进程完成的 REST ...

  4. 【实战】使用 Kettle 工具将 mysql 数据增量导入到 MongoDB 中

    最近有一个将 mysql 数据导入到 MongoDB 中的需求,打算使用 Kettle 工具实现.本文章记录了数据导入从0到1的过程,最终实现了每秒钟快速导入约 1200 条数据.一起来看吧~ 一.K ...

  5. windows下RocketMQ安装部署

    一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 1.下载 1.1地址:http://rocketmq.apache.org/relea ...

  6. 6、python基本数据类型之序列类型

    前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍序列类型及其通用操作. 一.序列类型 1)字符串(str):用单引号('),双引号("),三引号(三单 ...

  7. Git The requested URL returned error:403

    一.问题描述 hexo部署的仓库需要换到另一个账号上,于是按照之前创建的步骤,修改了hexo安装目录下的deploy的repo地址,然而hexo s和hexo g没出错,但是hexo d时,会出错. ...

  8. window和 linux 在一起 ios和 android在一起 net和js在一起

    step 1: Windows 10 的 Linux Bash 支持「并不是使用虚拟机/模拟器」实现的,而是嵌入一个完整的 Ubuntu Linux 环境.技术上是实时将 Linux 的系统调用转换为 ...

  9. Spring Cloud服务注册中心交付至kubernetes

    前言 服务发现原则: 各个微服务在启动时,会将自己的网络地址等信息注册到服务发现组件中,服务发现组件会存储这些信息 服务消费者可以从服务发现组件中查询到服务提供者的网络地址,并使用该地址来远程调用服务 ...

  10. MGR安装

    二.环境准备 主机名 IP地址 角色 node2.com 172.16.8.101 primary node3.com 172.16.8.53 seconde node3.com 172.16.8.6 ...