IE下contains方法执行结果不同解决方法
日期：2014-05-16 浏览次数：20426 次
IE下contains方法执行结果不同
<html>
<title>这是一段测试代码</title>
<script type="text/javascript">
function test(obj){
if (document.all){ //IE
obj.innerHTML+="<br/>obj:"+obj.getAttribute("id")+"<br/>obj\.firstChild:"+obj.firstChild.getAttribute("id")+"<br/>event.toElement:"+event.toElement.getAttribute("id");
obj.innerHTML+="<br/>obj.contains(obj.firstChild):"+obj.contains(obj.firstChild)+"<br/>obj.contains(event.toElement):"+obj.contains(event.toElement)+"<br/>";
}}
</script>
<body>
<div id="outer" style="width:400px;height:300px;background:#ccc;" onmouseover="test(this);"><div id="inner" style="width:300px;height:200px;background:#333;"></div></div>
</body>
</html>
测试环境：IE9
问题一：当鼠标移动到$("inner"）上时，obj.contains(obj.firstChild)与obj.contains(event.toElement)执行结果为何不同？（此时通过元素id可知“obj.firstChild”与“event.toElement”为同一节点，obj是不变的）
问题二：当鼠标移动到$("inner"）上时，test函数怎么执行了不止一次？
问题三：在<html>前加上<!DOCTYPE HTML>后调试结果为：对象不支持getAttribute属性或方法；
------解决方案--------------------
问题二：事件会冒泡。。（建议去看下Js 冒泡事件）
------解决方案--------------------
我在火狐下测试发现
function onmouseover(event) {
test(this);
}
中event在调试下为mouseover clientX=399, clientY=209
也就是只要坐标一改变event就被触发一次，也就是为什么在IE9环境下，在黑色框中只要鼠标移动就会多数据了
<html>
<title>这是一段测试代码</title>
<script type="text/javascript">
function test(obj){
if (document.all){ //IE
obj.innerHTML+="<br/>obj:"+obj.getAttribute("id")+"<br/>obj\.firstChild:"+obj.firstChild.getAttribute("id")+"<br/>event.toElement:"+event.toElement.getAttribute("id");
obj.innerHTML+="<br/>obj.contains(obj.firstChild):"+obj.contains(obj.firstChild)+"<br/>obj.contains(event.toElement):"+obj.contains(event.toElement)+"<br/>";
}}
</script>
<body>
<div id="outer" style="width:400px;height:300px;background:#ccc;" onmouseover="test(this);"><div id="inner" style="width:300px;height:200px;background:#333;"></div></div>
</body>
</html>
测试环境：IE9
问题一：当鼠标移动到$("inner"）上时，obj.contains(obj.firstChild)与obj.contains(event.toElement)执行结果为何不同？（此时通过元素id可知“obj.firstChild”与“event.toElement”为同一节点，obj是不变的）
问题二：当鼠标移动到$("inner"）上时，test函数怎么执行了不止一次？
问题三：在<html>前加上<!DOCTYPE HTML>后调试结果为：对象不支持getAttribute属性或方法；
------解决方案--------------------
问题二：事件会冒泡。。（建议去看下Js 冒泡事件）
------解决方案--------------------
我在火狐下测试发现
function onmouseover(event) {
test(this);
}
中event在调试下为mouseover clientX=399, clientY=209
也就是只要坐标一改变event就被触发一次，也就是为什么在IE9环境下，在黑色框中只要鼠标移动就会多数据了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
