[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. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- Virtualization API之libvirt
The virtualization API 之开源 libvirt探究 By Ruiy: libvirt supports Hypervisors(注,相关的hypervisors项目的权威网站已经 ...
- selenium webdriver python 操作Chrome浏览器
Step1: 下载chromedriver. 下载路径: http://chromedriver.storage.googleapis.com/index.html 选择一个合适的下载即可.我下载的是 ...
- 使用iScroll和photoswipe写手机浏览图片的插件的几点经验
首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...
- 15、Cocos2dx 3.0游戏开发找小三之Sprite：每一个精灵都是上辈子折翼的天使
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30475395 Sprite Sprite 能够说是 ...
- POJ 1686 Lazy Math Instructor (模似题+栈的运用) 各种坑
Problem Description A math instructor is too lazy to grade a question in the exam papers in which st ...
- [PWA] 11. Serve skeleton cache for root
Intead of cache the root floder, we want to cache skeleton instead. self.addEventListener('install', ...
- 基于redis 内存数据库简单使用
在ecplise中使用内存数据的客端户,前提要准备要下载两个jar包 commons-pool2-2.0.jar jedis-2.4.2.jar 前提准备做好了,那我们就开启redis的服务,打开一个 ...
- CSDN Markdown简明教程5-高速上手
0.文件夹 文件夹 前言 CSDN Markdown特点 CSDN Markdown高速上手 1 使用快捷键 粗体斜体 引用 链接 高亮代码块 图片 标题 列表 切割线 撤销反复 2 使用离线写作 3 ...
- 第五章：最后一步准备，1.8的Json模型、状态描述机制详解
<基于1.8 Forge的Minecraft mod制作经验分享> 1.8的所有纹理材质都需要一个Json来对其描述,这一块感觉是各大神的教程里面涉及最少最浅的,我就斗胆在这分享下我研究了 ...
- POJ 2007 Scrambled Polygon 凸包
Scrambled Polygon Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 7214 Accepted: 3445 ...