當麻許的超技八

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

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

簡單講解一下需求..

原始碼:

<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 就會先跳出

在跳出

證明一件事情代表因為 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效果時候會發生的問題…

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