2012-10-05

[IE][JavaScript] Bubble Event - StopPropagation

 

最近遇到一個很詭異的問題..

後來才知道跟Event Bubbling 有關係..

簡單講解一下需求..

sshot-175_2

原始碼:

<div id="a" style="width: 200px;height:200px;background-color:black;">
<div id="b" style="background-color: red;width:100px;height:100px">
</div>
</div>

很簡單外面那個DIV是黑色的他的ID 是a ,他包住 一個紅色的DIV叫做b


假設我先綁定 a DIV 一個click 事件 會跳出alert


Javascript Code :


$('#a').click(function () {
alert('a');
});

這時候因為a DIV 包住 b DIV


所以當我在b DIV 加入click 事件後


Javascript Code :


$('#b').bind('click', function () {
alert('b');
});

如果我點擊b DIV 就會先跳出


sshot-176_2


在跳出


sshot-177_2


 


證明一件事情代表因為 a DIV 包住 b DIV所以導致兩個click事件都會被觸發..


很好跟當年在Flex遇到一樣的bubble event 問題…


我查一下文件 http://api.jquery.com/event.stopPropagation/


的確透過  event.stopPropagation() 可以解決 event bubbling  的問題..


這時候 b DIV 事件改成


Javascript Code :

$('#b').bind('click', function (event) {
alert('b');
event.stopPropagation();
});


其實大致上沒問題了..


之後請教了一下demo  哥


他說這的確是有可能對於一些版本IE造成issue 所以他給了一段終極Code ..


Javascript Code :


function StopBubble(e) {
if (e && e.stopPropagation) {//非IE
e.stopPropagation();
}
else {//IE
window.event.cancelBubble = true;
}
}


這時候 b DIV 事件改成


Javascript Code :


$('#b').bind('click', function (event) {
alert('b');
StopBubble(event);
});

 


測起來感覺沒啥問題…


其實這問題我會遇到是因為對lightbox 跟mask效果時候會發生的問題…


希望之後碰到得人能夠快速解決..