19.阻止事件冒泡e.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("a").on("click", function (e) {
e.preventDefault();//阻止默认操作
e.stopPropagation();//防止事件冒泡
})
$("div").on("click", function () {
alert("父盒子被点击了");
})
})
</script>
</head>
<body>
<div>
<a href="http://www.cqmu.edu.cn">重庆医科大学</a>
</div>
</body>
</html>
如果不加e.stopPropagation();就会产生冒泡事件,点击链接,就会弹框,如果加了,就不会弹框
19.阻止事件冒泡e.stopPropagation();的更多相关文章
- 阻止事件冒泡(stopPropagation和cancelBubble)和阻止默认行为(preventDefault和returnValue)
<div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align: ...
- 阻止事件冒泡传播stopPropagation() 阻止自身默认行为preventdefault()
stopPropagation 简单理解:子元素的点击事件 不会去触发父元素的点击事件 preventdefault 简单理解:当点击提交按钮时(submit) 阻止对表 ...
- JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- angularjs中阻止事件冒泡,以及指令的注意点
appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
随机推荐
- pl/sql Command Window
由于工作需要,最近需要执行sql脚本,之前一直在用执行按钮操作,但最近公司制定了一套标准,其中就有执行sql脚本规范: 以前执行存存储过程: 现在修改存储过程如下: 第一步,打开对应窗口: 第二步,输 ...
- wordpress 基础文件
需要用到的PHP基础文件有: 404.php 404模板 rtl.css 如果网站的阅读方向是自右向左的,会被自动包含进来 comments.php 评论模板 single.php 文章模板.显 ...
- CE学习记录1
主题 春节放假终于有空学习下怎么制作外挂啦......学习写外挂大概是我一开始学习计算机的动力吧....只是一直似懂非懂..看教学视频各种不明白为什么....也没有专门的时间学习下怎么写....春节有 ...
- Centos手动编译安装vim8
系统:CentOs6.9 gcc版本:5.1.0 github上拉取vim工程之后,cd src,执行一下命令: $ ./configure $ sudo make gcc -c -I. -Iprot ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第五周
java学习第五周心得体会 本周,是Java学习第五周,随着时间推移,随着课本内容的推进,我们接触到的程序也开始变得越来越复杂,不再是二三章那些用来练手的小程序了,这一点,在我们的例题运 ...
- 【bzoj2186】[Sdoi2008]沙拉公主的困惑
2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 3303 Solved: 1129[Submit][S ...
- 【bzoj2553】[BeiJing2011]禁忌
2553: [BeiJing2011]禁忌 Time Limit: 20 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 595 Solved: ...
- 【bzoj1565】[NOI2009]植物大战僵尸
1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2164 Solved: 1001[Submit][Stat ...
- WebFlux04 SpringBootWebFlux集成MongoDB之Windows版本、WebFlux实现CRUD、WebFlux实现JPA、参数校验
1 下载并安装MongoDB 1.1 MongoDB官网 1.2 下载 solutions -> download center 1.3 安装 双击进入安装即可 1.3.1 安装时常见bug01 ...
- linux下安装sz/rz命令
参考 https://blog.csdn.net/kobejayandy/article/details/13291655