关于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>
相关文章
这篇文章主要介绍了c# BackgroundWorker使用方法，文中代码非常详细，帮助大家更好的参考学习，感兴趣的朋友可以了解下2020-06-06
压缩包制作也是很多项目中需要用到的功能。接下来通过本文给大家介绍基于C# 生成Zip压缩包代码，对c生成zip压缩包相关知识感兴趣的朋友一起学习吧2016-04-04
抽象工厂模式为创建一组相关或相互依赖的对象提供一个接口，而且无需指定他们的具体类。2016-06-06
这篇文章主要介绍了比较2个datatable内容是否相同的方法,大家参考使用吧2014-01-01
最近遇到一位朋友的程序崩溃，发现崩溃点在富编辑器 msftedit 上，这个不是重点，重点在于发现他已经开启了 页堆，由于 页堆 和 NT堆 的内存布局完全不一样，这一篇结合我的了解以及 windbg 验证来系统的介绍下 页堆,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了一道关于C#参数传递的面试题,实例分析了C#参数传递的相关使用技巧,需要的朋友可以参考下2015-05-05
Unity中的InitializeOnLoad特性实践深入解析
这篇文章主要为大家介绍了Unity中的InitializeOnLoad特性实践深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在C#中,浅克隆和深克隆是两种常见的对象克隆技术,本文主要介绍了C#浅克隆与深克隆,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
这篇文章主要介绍了C# 打开蓝牙设置界面的两种方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
利用TaskManager爬取2万条代理IP实现自动投票功能
话说某天心血来潮想到一个问题，朋友圈里面经常有人发投票链接，让帮忙给XX投票，以前呢会很自觉打开链接帮忙投一票。可是这种事做多了就会考虑能不能使用工具来进行投票呢，身为一名程序猿决定研究解决这个问题。感兴趣的朋友一起学习吧2015-09-09
最新评论