IE10的bug？disabled button如何觸發事件

時間 2019-11-14

標籤 ie10 bug disabled button 如何觸發事件欄目瀏覽器简体版

原文原文鏈接

最近碰到一個問題，IE10下的，貌似是個bug，求助！javascript

問題表現爲：在內部有dom元素的狀況下，disabled狀態的button會由於子元素的mouseover產生事件冒泡而觸發，也就是說，disabled的button被觸發了mouseover的事件。css

這個「bug」只在IE10 或IE10下的IE9兼容模式出現。IE8如下和其它瀏覽器都沒這個問題。html

下面給出最小化事件的代碼。java

代碼以下，請在IE10 下打開。jquery

<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的時候，事件卻被觸發了！！。ajax

而當鼠標移動到按鈕4的時候，由於對內部的div的mouseover事件進行了處理，阻止了冒泡事件，所以沒有被觸發。瀏覽器

研究到這裏，簡單的想到對button內部的元素都這麼處理就行了。恰好項目中用到jquery，以下。dom

$(’button span').bind('mouseover',function(evt){
　 if (window.event) {  
        event.cancelBubble = true;  
    }else if (evt){  
        evt.stopPropagation();  
    }  
});

事實上，這段代碼的確工做的很好。可是，項目中，大多數此類按鈕都是經過ajax動態添加的。所以不能用bind方法。spa

也許這時候有人說經過live或者delegate方法去綁定。但是研究他們的機制就會知道，這兩個方法原本就是依賴事件冒泡實現的。code

所以，像各位求助，有什麼好的解決方案嗎?拜謝！