[javascript]事件冒泡处理
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box1 {
width: 400px;
height: 400px;
background: #ccc;
}
#box2 {
width: 300px;
height: 300px;
background: #ddd;
}
#box3 {
width: 200px;
height: 200px;
background: #eee;
}
</style>
<script type="text/javascript"> function addEventListener(obj, f, type) {
if (obj.addEventListener) {
obj.addEventListener(type, f, false);
} else {
obj.attachEvent('on' + type, function(event) {
f.call(obj, event);
});
}
} function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
} window.onload = function() {
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
var box3 = document.querySelector('#box3'); addEventListener(box1, function(event) {
stopPropagation(event);
alert('box1');
}, 'click'); addEventListener(box2, function(event) {
stopPropagation(event);
alert('box2');
}, 'click'); addEventListener(box3, function(event) {
stopPropagation(event);
alert('box3');
}, 'click');
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
[javascript]事件冒泡处理的更多相关文章
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- 转：JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- JavaScript事件冒泡简介及应用
一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个 ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- 《Euclidea3》-Eta-07
Q: 分析:考虑到充分利用三等分和角度的信息,这里我们只需做出一个36°的角即可. 考虑一个顶角是36°的等腰三角形.如下图. 设AD=a1,CD=a2,根据相似,易得a1:a2=(√5-1)/2. ...
- 《ACM国际大学生程序设计竞赛题解Ⅰ》——模拟题
这篇文章来介绍一些模拟题,即一类按照题目要求将现实的操作转换成程序语言. zoj1003: On every June 1st, the Children's Day, there will be a ...
- N - Tram - poj1847（简单最短路）
题意:火车从一点开到另一点,轨道上有很多岔路口,每个路口都有好几个方向(火车能够选任意一个方向开),但是 默认的是 第一个指向的方向,所以如果要选择别的方向的话得 进行一次切换操作 ,给定一个起点一个 ...
- Java日期相关操作
1.获得日期 在旧版本 JDK 的时代,有不少代码中日期取值利用了 java.util.Date 类,但是由于 Date 类不便于实现国际化,其实从 JDK1.1 开始,就更推荐使用 java.uti ...
- 利用NIO建立Socket服务器
传统的Java 的IO,利用Socket建立服务器,接收客户端连接,一般都是为每一个连接建立一个线程,如果连接数巨大,那么服务器开销也将巨大..NIO的原理,可以参照图:http://new.51ct ...
- jq實現網頁個性title
<!DOCTYPE html> <html content="text/html; charset=UTF-8"> <title>tooltip ...
- log4j配置文件详解---转
使用步骤注意: 1. 从http://logging.apache.org/log4j/1.2/ 下载文件 2. 在src目录下加入log4j.properties,将jar包放入build -pat ...
- searchbar的使用介绍
searchBar的使用介绍 首先如何创建一个SearchBar实例: self.searchBar = [[UISearchBar alloc] initWithFrame: CGRectMake( ...
- C++学习路线
已经确定做C++后台的工作了,因此,要对C++要越来越熟悉才行,今天,在此列出学习和温习C++书籍的顺序,从而由浅入深地学习C++. 1. <C++ primer> 2. <Acce ...
- jquery在ie浏览器下中文乱码的问题
用jquery的ajax方法在调用后台数据发现中文乱码,无法解析中文的url,而在别的浏览器下面就不会,如下所示 $.ajax({ type:'get', url:'薛之谦-演员.lrc', asyn ...