关于javascript冒泡与默认事件的使用详解
更新时间：2013年05月14日 16:21:33 作者：
本篇文章是对javascript中冒泡与默认事件的使用进行了详细的分析介绍，需要的朋友参考下
对于javascript的冒泡，我一直误解它了，
冒泡，即是从底层往外blow blow blow ...
惭愧的是，我一直以为阻止冒泡是阻止父元素往子元素传递事件……
贴上一串代码以便往后回顾！
复制代码 代码如下:
<script type="text/javascript">
window.onload=function(){
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var c=document.getElementById("d");
a.onclick=function(e){
this.style.background="#000";
};
b.onclick=function(e){
this.style.background="#ccc";
//阻止事件冒泡
window.event.cancelBubble = true;//IE8以下
e.stopPropagation();
};
d.onmousedown=function(e){
//阻止默认事件，比如在chrome下图片有拖拽默认行为
window.event.returnValue = false;
e.preventDefault();
}
}
</script>
复制代码 代码如下:
Html部分
<div id="a" style="width:300px;height:300px;background:red;overflow:hidden;">
<div id="b" style="width:200px;height:200px;background:green;margin:50px 0 0 50px;overflow:hidden;">
<div id="c" style="width:100px;height:100px;background:yellow;margin:50px 0 0 50px;overflow:hidden;">
<img src="240x240.jpg" width="50" height="50" id="d" />
</div>
</div>
</div>
另一个例子：
复制代码 代码如下:
<script type="text/javascript">
window.onload=function(){
document.getElementById("test").addEventListener('click',function(e){
alert('aaaa')
},false);
document.getElementById("test1").addEventListener('click',function(e){
alert('bbb')
e.stopPropagation();
},false)
}
</script>
复制代码 代码如下:
<style type="text/css">
#test1{width:100px;height:100px;background:#ff0}
#test2{width:100px;height:100px;background:#ff0}
</style>
<div id="test" style="width:100px;height:100px;background:#f60;padding:20px;">
<div id="test1"></div>
</div>
相关文章
UTF-8编码是现代应用中处理多语言文本的首选,所以本文为大家详细介绍了C#如何使用UTF-8编码实现处理多语言文本,感兴趣的小伙伴可以了解下2024-01-01
这篇文章介绍了C#实现中文日历Calendar的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
WPF开发之UniformGrid和ItemsControl的应用详解
为了简化开发,WPF提供了UniformGrid布局和ItemsControl容器,本文以一个简单的小例子,简述如何在WPF开发中应用UniformGrid和ItemsControl实现均匀的布局,希望对大家有所帮助2024-01-01
这篇文章主要介绍了C#中面向对象编程机制之继承学习笔记,本文给出一个简单子实例讲解C#中的继承,并讲解了一些C#继承的知识技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了C#中的事务用法,以一个简单实例形式分析了C#创建及使用事物的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了C#影院售票系统毕业设计，学习内容是总结销售信息的保存以及加载销售信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了C#实现windows系统重启和关机的的方法,涉及C#调用windows系统命令实现控制开机、关机等操作的技巧,非常简单实用,需要的朋友可以参考下2024-02-02
使用VS2010 C#开发ActiveX控件(下),完整代码打包下载
我们介绍了开发、打包、发布、使用ActiveX控件的全过程。在演示程序中，我们没有调用串口通信和读卡器Dll程序，由于我们读卡器的原始Dll是使用其它语言进行开发的，对C#来说，是非托管代码，因此我们还需要在代码级别进行非托管代码的安全性设置2011-05-05
DLR 是 C#4.0 新引进来的概念，其主要目的就是为了动态绑定与交互。下面小编给大家带来一篇不错教程，一文带你了解 C# DLR 的世界,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了C# HttpClient上传文件并附带其它参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论