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效果時候會發生的問題…


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

@