JS事件冒泡(阻止)
2015-08-20 17:08
661 查看
来源:http://blog.csdn.net/tnjun123456/article/details/7105935
在默认情况下,发生在一个子元素上的单击事件(或者其他事件),如果在其父级元素绑定了一个同样的事件,此时点击子元素,click事件会首先被子元素捕获,执行绑定的事件程序,之后会被父级元素捕获,再次激发一段脚本的执行,这就是所谓的“事件冒泡”。
看个例子:
[html] view
plaincopy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
}
</script>
</body>
</html>
在通常情况下,我们只希望事件发生在它的目标而并非它的父级元素上,只需加个stopBubble方法,即可取消事件冒泡,详见以下代码:
[html] view
plaincopy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡的通用函数
function stopBubble(e){
// 如果传入了事件对象,那么就是非ie浏览器
if(e&&e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则我们使用ie的方法来取消事件冒泡
window.event.cancelBubble = true;
}
}
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
stopBubble(e);
}
</script>
</body>
</html>
现在你可能想知道,什么时候需要阻止事件冒泡?事实上,现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序(尤其是需要处理键盘和鼠标)的时候,就有这个必要了。
在默认情况下,发生在一个子元素上的单击事件(或者其他事件),如果在其父级元素绑定了一个同样的事件,此时点击子元素,click事件会首先被子元素捕获,执行绑定的事件程序,之后会被父级元素捕获,再次激发一段脚本的执行,这就是所谓的“事件冒泡”。
看个例子:
[html] view
plaincopy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
}
</script>
</body>
</html>
在通常情况下,我们只希望事件发生在它的目标而并非它的父级元素上,只需加个stopBubble方法,即可取消事件冒泡,详见以下代码:
[html] view
plaincopy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
<div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡的通用函数
function stopBubble(e){
// 如果传入了事件对象,那么就是非ie浏览器
if(e&&e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则我们使用ie的方法来取消事件冒泡
window.event.cancelBubble = true;
}
}
var obj1 = document.getElementById('obj1');
var obj2 = document.getElementById('obj2');
obj1.onclick = function(){
alert('我点击了obj1');
}
obj2.onclick = function(e){
alert('我点击了obj2');
stopBubble(e);
}
</script>
</body>
</html>
现在你可能想知道,什么时候需要阻止事件冒泡?事实上,现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序(尤其是需要处理键盘和鼠标)的时候,就有这个必要了。
相关文章推荐
- extjs文件上传
- JS原型与原型链终极详解
- js限制文本框的输入内容代码分享(3类)
- jstat命令详解
- javascript 获取event对象
- 遍历Json返回的数据几种方法
- JS:offsetWidth\offsetleft 等图文解释
- 三种方法实现js跨域访问
- JavaScript forEach 跳出当前循环
- js获取Html元素的实际宽度高度
- chart.js 里添加图表的清单:
- JS 事件对象和事件冒泡
- js中(function(){…})()立即执行函数写法理解
- JS实现的通用表单验证插件完整实例
- formvalidator 表单验证插件
- javascript 事件 第23节
- javascript 闭包暴露句柄和命名冲突的解决方案
- MVC Newtonsoft.Json解析JSON字符串
- 极光 通过js函数
- JavaScript(二)-16-(JS自定义对象2)