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

所以，像各位求助，有什么好的解决方案吗?拜谢！