IE 10のバグ?disabled buttonがイベントをトリガーする方法
7430 ワード
最近1つの问题に出会って、IE 10の下で、バグのようで、助けを求めます!
問題は、内部にdom要素がある場合、disabled状態のbuttonは、サブ要素のmouseoverにイベントバブルが発生することによってトリガーされ、すなわち、disabledのbuttonがmouseoverのイベントをトリガーされることである.
この「バグ」は、IE 10またはIE 10におけるIE 9互換モードのみに現れる.IE 8以下も他のブラウザもこの問題はありません.
次に、イベントを最小化するコードを示します.
コードは以下の通り、IE 10で開いてください.
マウスがボタン1に移動すると、mouseoverはトリガーされません.しかし2,3に移動すると、イベントがトリガーされます!!!
一方、マウスがボタン4に移動すると、内部のdivのmouseoverイベントが処理され、バブルイベントが阻止されるため、トリガーされない.
ここまで研究して、button内部の要素をこのように処理すればいいと簡単に考えました.ちょうどプロジェクトでjqueryが使われています.以下のようにします.
実際、このコードは確かによく機能しています.ただし、プロジェクトでは、ajaxによって動的に追加されるボタンがほとんどです.そのためbindメソッドは使用できません.
ライブやdelegateでバインドするという人もいるかもしれません.しかし、彼らのメカニズムを研究すると、この2つの方法はもともと事件の泡に依存して実現されていることがわかります.
そのため、皆さんが助けを求めているように、何か良い解決策はありますか?バイバイ!
問題は、内部にdom要素がある場合、disabled状態のbuttonは、サブ要素のmouseoverにイベントバブルが発生することによってトリガーされ、すなわち、disabledのbuttonがmouseoverのイベントをトリガーされることである.
この「バグ」は、IE 10またはIE 10におけるIE 9互換モードのみに現れる.IE 8以下も他のブラウザもこの問題はありません.
次に、イベントを最小化するコードを示します.
コードは以下の通り、IE 10で開いてください.
<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メソッドは使用できません.
ライブやdelegateでバインドするという人もいるかもしれません.しかし、彼らのメカニズムを研究すると、この2つの方法はもともと事件の泡に依存して実現されていることがわかります.
そのため、皆さんが助けを求めているように、何か良い解決策はありますか?バイバイ!