最近碰到一个问题，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方法去绑定。可是研究他们的机制就会知道，这两个方法本来就是依赖事件冒泡实现的。
因此，像各位求助，有什么好的解决方案吗?拜谢！