關(guān)于javascript冒泡與默認(rèn)事件的使用詳解
更新時(shí)間：2013年05月14日 16:21:33 作者：
本篇文章是對(duì)javascript中冒泡與默認(rèn)事件的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
對(duì)于javascript的冒泡，我一直誤解它了，
冒泡，即是從底層往外blow blow blow ...
慚愧的是，我一直以為阻止冒泡是阻止父元素往子元素傳遞事件……
貼上一串代碼以便往后回顧！
復(fù)制代碼 代碼如下:
<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){
//阻止默認(rèn)事件，比如在chrome下圖片有拖拽默認(rèn)行為
window.event.returnValue = false;
e.preventDefault();
}
}
</script>
復(fù)制代碼 代碼如下:
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>
另一個(gè)例子：
復(fù)制代碼 代碼如下:
<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>
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- js停止冒泡和阻止瀏覽器默認(rèn)行為的簡(jiǎn)單方法
- js阻止默認(rèn)瀏覽器行為與冒泡行為的實(shí)現(xiàn)代碼
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡(jiǎn)單方法
- js之事件冒泡和事件捕獲詳細(xì)介紹
- 阻止JavaScript事件冒泡傳遞（cancelBubble 、stopPropagation）
- javascript事件冒泡詳解和捕獲、阻止方法
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- js阻止冒泡和默認(rèn)事件（默認(rèn)行為）詳解
相關(guān)文章
VS2010寫的程序在自己電腦可以運(yùn)行、其他電腦上不能運(yùn)行的解決方案
自己用Visual Studio 2010 旗艦版寫了一個(gè)軟件，在自己電腦上運(yùn)行完全沒(méi)有問(wèn)題，但是拷貝到其他人電腦上之后不管雙擊還是以管理身份運(yùn)行，均沒(méi)有反應(yīng)，進(jìn)程管理器中相關(guān)進(jìn)程也只是一閃而過(guò)2013-04-04
本文主要介紹了C#無(wú)損壓縮圖片的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
這篇文章主要介紹了C#使用timer定時(shí)在屏幕上輸出信息的方法,涉及C#中timer定時(shí)器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了C#支付寶掃碼支付代碼的完整版本，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
C#利用iTextSharp組件給PDF文檔添加圖片/文字水印
這篇文章主要給大家介紹了關(guān)于如何C#利用iTextSharp組件給PDF文檔添加圖片/文字水印的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)單位換算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
C#實(shí)現(xiàn)簡(jiǎn)單點(diǎn)餐系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)簡(jiǎn)單點(diǎn)餐系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要通過(guò)具體的實(shí)例，向我們分析了C#如何處理Json字符串,需要的朋友可以參考下2015-02-02
C# winform登陸框驗(yàn)證碼的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了C# winform登陸框驗(yàn)證碼的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
C# 實(shí)現(xiàn)SDL2進(jìn)行視頻播放窗口截圖和字幕添加
這篇文章主要介紹了C# 實(shí)現(xiàn)SDL2進(jìn)行視頻播放窗口截圖和字幕添加，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12