我的代码是:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{
border:1px solid #CCC;
margin:5px;
padding:5px;
}
</style>
<script type="text/javascript">
window.onload = changeColor;
function changeColor() {
for(var i =0; i < document.getElementById("main").getElementsByTagName("p").length; i++) {
var obj = document.getElementById("main").getElementsByTagName("p")[i];
if (window.addEventListener) {
obj.addEventListener('mousemove', function () {
this.style.backgroundColor ="#EEE";
}, false);
obj.addEventListener('mouseout', function () {
this.style.backgroundColor ="#FFF";
}, false);
} else if (window.attachEvent) {
//for ie
obj.attachEvent('onmousemove', function () {
this.style.backgroundColor ="#EEE";
});
obj.attachEvent('onmouseout', function () {
this.style.backgroundColor ="#FFF";
});
}
}
}
</script>
</head>
<body>
<div>
<p>1</p>
<div id="main">
<p>2.1</p>
<p>2.2</p>
<p>2.3</p>
</div>
</div>
</body>
</html>
它在Chrome,FireFox和ie9中运行良好,但无法在IE7 / 8中运行
错误消息是:无法设置“backgroundColor”的属性值:对象为null或未定义
与我有什么关系?
答案 0 :(得分:1)
在IE中使用attachEvent
时,this
设置为window
对象,而不是发生事件的对象。
在IE中,全局变量window.event.srcElement
将包含事件的目标对象。
您可以像这样编写一个解决方法,使所有事件处理程序的工作方式相同:
function hookEvent(event, obj, fn) {
if (obj.addEventListener) {
obj.addEventListener(event, fn, false);
} else {
obj.attachEvent("on" + event, function() {return(fn.call(obj, window.event));});
}
}
这将使this
设置为事件的源对象,并且事件处理程序的参数是事件对象。
答案 1 :(得分:0)
this
未绑定到IE的attachEvent
。
改为使用event.srcElement
。
另请注意,event
全局对象属性及其srcElement
属性也是IE特定的。