關(guān)于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>
相關(guān)文章
UTF-8編碼是現(xiàn)代應用中處理多語言文本的首選,所以本文為大家詳細介紹了C#如何使用UTF-8編碼實現(xiàn)處理多語言文本,感興趣的小伙伴可以了解下2024-01-01
這篇文章介紹了C#實現(xiàn)中文日歷Calendar的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
WPF開發(fā)之UniformGrid和ItemsControl的應用詳解
為了簡化開發(fā),WPF提供了UniformGrid布局和ItemsControl容器,本文以一個簡單的小例子,簡述如何在WPF開發(fā)中應用UniformGrid和ItemsControl實現(xiàn)均勻的布局,希望對大家有所幫助2024-01-01
這篇文章主要介紹了C#中面向?qū)ο缶幊虣C制之繼承學習筆記,本文給出一個簡單子實例講解C#中的繼承,并講解了一些C#繼承的知識技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了C#中的事務用法,以一個簡單實例形式分析了C#創(chuàng)建及使用事物的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了C#影院售票系統(tǒng)畢業(yè)設計，學習內(nèi)容是總結(jié)銷售信息的保存以及加載銷售信息，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
C#實現(xiàn)windows系統(tǒng)重啟和關(guān)機的代碼詳解
這篇文章主要介紹了C#實現(xiàn)windows系統(tǒng)重啟和關(guān)機的的方法,涉及C#調(diào)用windows系統(tǒng)命令實現(xiàn)控制開機、關(guān)機等操作的技巧,非常簡單實用,需要的朋友可以參考下2024-02-02
使用VS2010 C#開發(fā)ActiveX控件(下),完整代碼打包下載
我們介紹了開發(fā)、打包、發(fā)布、使用ActiveX控件的全過程。在演示程序中，我們沒有調(diào)用串口通信和讀卡器Dll程序，由于我們讀卡器的原始Dll是使用其它語言進行開發(fā)的，對C#來說，是非托管代碼，因此我們還需要在代碼級別進行非托管代碼的安全性設置2011-05-05
DLR 是 C#4.0 新引進來的概念，其主要目的就是為了動態(tài)綁定與交互。下面小編給大家?guī)硪黄诲e教程，一文帶你了解 C# DLR 的世界,需要的朋友可以參考下2020-02-02
C# HttpClient上傳文件并附帶其它參數(shù)方式
這篇文章主要介紹了C# HttpClient上傳文件并附帶其它參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11