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. ...
随机推荐
- Elasticsearch 单字符串多字段查询
前言 有些时候,我们搜索的时候,只会提供一个输入框,但是会查询相关的多个字段,典型的如Google搜索,我们该如何用 Elasticsearch 如何实现呢? 实例 从单字符串查询的实例说起 创建测试 ...
- CSS水平布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 竖式问题(JAVA语言)
package 第三章; import java.util.Scanner; public class 竖式问题 { public static void main(String[] args) { ...
- 推荐模型NeuralCF：原理介绍与TensorFlow2.0实现
1. 简介 NCF是协同过滤在神经网络上的实现--神经网络协同过滤.由新加坡国立大学与2017年提出. 我们知道,在协同过滤的基础上发展来的矩阵分解取得了巨大的成就,但是矩阵分解得到低维隐向量求内积是 ...
- （数据科学学习手札114）Python+Dash快速web应用开发——上传下载篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- 003-Java中的变量和数据类型
@ 目录 一.变量 1.什么变量 2.变量的三要素 3.变量的命名规范 4.变量的分类 5.变量的作用域 6.变量的注意事项 二.数据类型 1.什么是数据类型 2.数据类型有什么用 3.数据类型的分类 ...
- Shell十三问更新总结版 -- 什么叫做 Shell？-- Shell十三问<第一问>
Shell十三问更新总结版 简介 ChinaUnix 论坛 Shell 版名为網中人的前辈于 2004 年发布的精华贴,最近回炉这块内容,觉得很多东西讲的实在透彻,非常感谢前辈網中人,同时我个人也对这 ...
- 全面了解Vue3的 ref 和相关函数和计算属性
基础类型的响应性 -- ref 在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢? 可能你会想到这样来实现: const count = rea ...
- OO第三单元作业——魔教规格
OO第三单元作业--魔教规格 JML的理论基础和相关工具 JML(Java Modeling Language,Java建模语言),在Java代码种增加了一些符号,这些符号用来标志一个方法是干什么 ...
- JavaScript深入理解-Set、Map、WeakSet和WeakMap
Set Set 对象允许储存任何类型的唯一值,无论是原始值或者是对象引用 本质:构造函数,用来生成 Set 数据结构 描述 Set 对象是值的集合,你可以按照插入的顺序迭代它的元素.Set 中的元素只 ...