最近碰到一個問題，IE10下的，貌似是個bug，求助！
問題表現為：在內部有dom元素的情況下，disabled狀態的button會因為子元素的mouseover產生事件冒泡而觸發，也就是說，disabled的button被觸發了mouseover的事件。
這個“bug”只在IE10 或IE10下的IE9兼容模式出現。IE8以下和其它瀏覽器都沒這個問題。
下面給出最小化事件的代碼。
代碼如下，請在IE10 下打開。
<html> <head> <style tyle="text/css"> </style> </head> <body> <p><button onmouseover="alert('active button')" class="active">激活</button></p> <p><button onmouseover="alert('disabled button1')" class="unactive" disabled> 未激活1</button></p> <p><button onmouseover="alert('disabled button2')" class="unactive" disabled><span> 未激活2</span></button></p> <p><button onmouseover="alert('disabled button3')" class="unactive" disabled><div> 未激活3</div></button></p> <p><button onmouseover="alert('disabled button4')" class="unactive" disabled><span onmouseover="over();"> 未激活4(取消冒泡)</span></button></p> <script type="text/javascript"> function over(evt){ if (window.event) { event.cancelBubble = true; }else if (evt){ evt.stopPropagation(); } } </script> </body> </html>
當鼠標移動到按鈕1上的時候，mouseover並沒有被觸發。但是移動到2，3的時候，事件卻被觸發了！！。
而當鼠標移動到按鈕4的時候，因為對內部的div的mouseover事件進行了處理，阻止了冒泡事件，因此沒有被觸發。
研究到這里，簡單的想到對button內部的元素都這么處理就好了。剛好項目中用到jquery，如下。
$(’button span').bind('mouseover',function(evt){
if (window.event) {
event.cancelBubble = true;
}else if (evt){
evt.stopPropagation();
}
});
事實上，這段代碼的確工作的很好。但是，項目中，大多數此類按鈕都是通過ajax動態添加的。因此不能用bind方法。
也許這時候有人說通過live或者delegate方法去綁定。可是研究他們的機制就會知道，這兩個方法本來就是依賴事件冒泡實現的。
因此，像各位求助，有什么好的解決方案嗎?拜謝！