JS阻止冒泡事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#dv1{
width: 500px;height: 500px;background: red;border: 1px solid;
}
#dv2{
width: 400px;height: 400px;background: blue;border: 1px solid;
}
#dv3{
width: 200px;height: 200px;background: yellow;border: 1px solid;
}
</style>
</head>
<body>
<div id ="dv1">
<div id ="dv2">
<div id ="dv3"></div>
</div>
</div>
<script type="text/javascript">
var b1=document.getElementById('dv1');
var b2=document.getElementById('dv2');
var b3=document.getElementById('dv3');
b1.onclick=function () {
alert(1);
// body...
}
function zuzhi(evt){
var e=evt||window.event
window.event? e.cancelBubble=true:e.stopPropagation();
}
b2.onclick=function () {
alert(2)
// body...
}
b3.onclick=function () {
alert(3);
zuzhi();
// body...
}
</script>
</body>
</html>
JS阻止冒泡事件的更多相关文章
- js阻止冒泡事件和默认事件的方法
阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...
- js 阻止冒泡事件和默认事件
阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...
- JS阻止冒泡事件以及默认事件发生的简单方法
如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...
- js阻止冒泡事件及默认操作
1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
随机推荐
- SEO优化基础知识
一.标点符号的重要性 很多人忽略了标点符号对爬虫的重要性,爬虫并不是对所有标点符号都爬取,下面列举几个对关键字分隔有帮助的符号. 1.1.逗号( , ) ==> 千万千万要使用英文的逗号,而不是 ...
- PTA 线性表元素的区间删除
6-8 线性表元素的区间删除 (20 分) 给定一个顺序存储的线性表,请设计一个函数删除所有值大于min而且小于max的元素.删除后表中剩余元素保持顺序存储,并且相对位置不能改变. 函数接口定义: ...
- sqli-labs系列——第三关
less3 判断注入类型 这第三关有点意思,是一个带括号的数字型注入,这里需要闭合它的括号,之前遇到过很多这样的站,它的sql语句一般都是这样的: $sql = select * from user ...
- Ubuntu18.04美化(Mac OS主题) 美化小白专用
本文主要针对第一次接触Ubuntu美化的童鞋们,有些啰嗦的地方大神勿喷 先上效果图 首先安装神器 gnome-tweak-tool 开启一个终端,输入 sudo apt install gnome-t ...
- 数据调度组件:基于Azkaban协调时序任务执行
一.Azkaban概述 1.任务时序 在数据服务的业务场景中,很常见的业务流程就是日志文件经过大数据分析,再向业务输出结果数据:在该过程中会有很多任务需要执行,并且很难精准把握任务执行的结束时间,但是 ...
- [React Hooks长文总结系列一]初出茅庐,状态与副作用
写在开头 React Hooks在我的上一个项目中得到了充分的使用,对于这个项目来说,我们跳过传统的类组件直接过渡到函数组件,确实是一个不小的挑战.在项目开发过程中也发现项目中的其他小伙伴(包括我自己 ...
- 走进springboot
SpringBoot基础 核心思想---自动装配---约定大于配置 开发环境:jdk1.8.maven.springboot.idea 一.快速构建一个springboot项目 1.1.进入sprin ...
- PAT (Advanced Level) Practice 1041 Be Unique (20 分) 凌宸1642
PAT (Advanced Level) Practice 1041 Be Unique (20 分) 凌宸1642 题目描述: Being unique is so important to peo ...
- [Fundamental of Power Electronics]-PART I-5.不连续导电模式-5.2 变比M分析
5.2 变比M分析 经过一些改进,第二章中的用于CCM稳态分析的相同技术和近似方法可以应用于DCM. (a)电感伏秒平衡.电感电压直流分量必须为0: \[<v_{L}>=\frac{1}{ ...
- Python数据分析入门(十六):设置可视化图表的信息
现在我们添加图后,没有指定x轴代表什么,y轴代表什么,以及这个图的标题是什么.因此以下我们通过一些属性来设置一下. 设置线条样式: 使用plot方法:plot方法就是用来绘制线条的,因此可以在绘制的时 ...