IE10的bug？disabled button如何触发事件

最新推荐文章于 2022-04-10 20:59:54 发布

weixin_30737433

最新推荐文章于 2022-04-10 20:59:54 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xujif/p/3245227.html

版权

最近碰到一个问题，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方法去绑定。可是研究他们的机制就会知道，这两个方法本来就是依赖事件冒泡实现的。

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

转载于:https://www.cnblogs.com/xujif/p/3245227.html