[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. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- hihoCoder 1389 Sewage Treatment 【二分+网络流+优化】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛)
#1389 : Sewage Treatment 时间限制:2000ms 单点时限:2000ms 内存限制:256MB 描述 After years of suffering, people coul ...
- Happy Number——LeetCode
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- FZYZOJ-1578 [NOIP福建夏令营]数列分段
P1578 -- [NOIP福建夏令营]数列分段 时间限制:1000MS 内存限制:131072KB 状态:Accepted 标签: 二分 无 无 Descripti ...
- 数学概念——G 最大公约数
G - 数论,最大公约数 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- hive 模块
- android开发launcher
1. launcher是桌面应用程序 一. android.intent.category.LAUNCHER与android.intent.category.HOME的差别? android ...
- Java 删除当前文件夹及其文件夹下的全部文件
删除文件夹2以下的全部文件及其文件夹 演示样例文件夹例如以下:D:/test/1/2 1.使用FileUtils类.静默删除 String url = "D:/test/1/2"; ...
- “too many open files" ----增大打开的文件数
http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html [root@localhost ~]# ab -n -c http:/ ...
- cocos2d-x项目过程记录(跨平台iOS和Android)
(原创作品,欢迎转载,注明出处,谢谢:http://www.cnblogs.com/binxindoudou/admin/EditPosts.aspx?postid=3205249) 1.配置环境,重 ...
- JNI与多线程
在android开发过程中,由于主线程要聚焦于UI交互,为了软件运行流畅必然要用到很多多线程技术.而在JNI机制中专门提供了一些避免线程冲突的函数.了解.学习并掌握如何避免线程冲突问题是一个程序猿的必 ...