<!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();的更多相关文章

  1. 阻止事件冒泡(stopPropagation和cancelBubble)和阻止默认行为(preventDefault和returnValue)

    <div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align: ...

  2. 阻止事件冒泡传播stopPropagation() 阻止自身默认行为preventdefault()

    stopPropagation       简单理解:子元素的点击事件  不会去触发父元素的点击事件 preventdefault       简单理解:当点击提交按钮时(submit)   阻止对表 ...

  3. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  4. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  5. angularjs中阻止事件冒泡,以及指令的注意点

    appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...

  6. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  7. 阻止事件冒泡两种方式:event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  8. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  9. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

随机推荐

  1. pl/sql Command Window

    由于工作需要,最近需要执行sql脚本,之前一直在用执行按钮操作,但最近公司制定了一套标准,其中就有执行sql脚本规范: 以前执行存存储过程: 现在修改存储过程如下: 第一步,打开对应窗口: 第二步,输 ...

  2. wordpress 基础文件

    需要用到的PHP基础文件有: 404.php 404模板  rtl.css  如果网站的阅读方向是自右向左的,会被自动包含进来 comments.php  评论模板 single.php 文章模板.显 ...

  3. CE学习记录1

    主题 春节放假终于有空学习下怎么制作外挂啦......学习写外挂大概是我一开始学习计算机的动力吧....只是一直似懂非懂..看教学视频各种不明白为什么....也没有专门的时间学习下怎么写....春节有 ...

  4. Centos手动编译安装vim8

    系统:CentOs6.9 gcc版本:5.1.0 github上拉取vim工程之后,cd src,执行一下命令: $ ./configure $ sudo make gcc -c -I. -Iprot ...

  5. 201671010140. 2016-2017-2 《Java程序设计》java学习第五周

    java学习第五周心得体会        本周,是Java学习第五周,随着时间推移,随着课本内容的推进,我们接触到的程序也开始变得越来越复杂,不再是二三章那些用来练手的小程序了,这一点,在我们的例题运 ...

  6. 【bzoj2186】[Sdoi2008]沙拉公主的困惑

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 3303  Solved: 1129[Submit][S ...

  7. 【bzoj2553】[BeiJing2011]禁忌

    2553: [BeiJing2011]禁忌 Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 595  Solved: ...

  8. 【bzoj1565】[NOI2009]植物大战僵尸

    1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2164  Solved: 1001[Submit][Stat ...

  9. WebFlux04 SpringBootWebFlux集成MongoDB之Windows版本、WebFlux实现CRUD、WebFlux实现JPA、参数校验

    1 下载并安装MongoDB 1.1 MongoDB官网 1.2 下载 solutions -> download center 1.3 安装 双击进入安装即可 1.3.1 安装时常见bug01 ...

  10. linux下安装sz/rz命令

    参考 https://blog.csdn.net/kobejayandy/article/details/13291655