原生JS给元素添加事件，在IE7/8中失效问题
0
悬赏园豆：50
[已解决问题]
解决于 2012-02-20 11:34
我用原生JS给元素添加了鼠标移动，移出事件，在FireFox、Chrome、IE9下均可以正常运行，但IE7/8下没效果(IE6没测)，请高人指点，代码如下：
<!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);
} elseif (window.attachEvent) {
//适用用IE浏览器
obj.attachEvent('mousemove', function () {
this.style.backgroundColor ="#EEE";
});
obj.attachEvent('moumouseoutsemove', 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>
最佳答案
0
window.onload = function () {
var pArray = document.getElementById("main").getElementsByTagName("p"), i = 0, length = pArray.length;
for (; i < length; i++) {
pArray[i].onmousemove = function () {
this.style.backgroundColor = "#EEE";
};
pArray[i].onmouseout = function () {
this.style.backgroundColor = "#FFF";
};
}
};
收获园豆：30
谢谢，你的代码可用，但不知道我的写法哪儿错了
@artwl: 弄明白了哈，在IE7/8中this指向了window，结帖哈
其他回答(2)
0
改为: obj.attachEvent('on...', ...); 另外下面的拼写错误
收获园豆：20
谢谢，我改为：
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) {
//适用用IE浏览器
obj.attachEvent('onmousemove', function () {
this.style.backgroundColor = "#EEE";
});
obj.attachEvent('onmouseout', function () {
this.style.backgroundColor = "#FFF";
});
}
后在IE7下还是运行不了，报“无法设置属性“backgroundColor”的值: 对象为 null 或未定义”错误，能帮忙看看吗？
@artwl: IE绑定(attachEvent)下，this 指的是window对象
@artwl: 我抄一段书吧:
IE绑定的优点
可以为同一元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
IE绑定的缺点
IE仅支持事件捕获的冒泡阶段
事件监听函数内的this关键字指向了window对象，而不是当前元素
事件对象仅存在于window.event参数中
事件必须以ontype的形式命名，比如，onclick而非click
仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener
@artwl: 而且你的捕获也是否应该写在 main 元素上
@ChatinCode: 嗯，弄明白了，谢谢哈
@artwl: 我改写了一下您的js代码
View Code
1 window.onload = changeColor;
2 function changeColor() {
3 var main = document.getElementById("main");
4 var mouseeventHandler = function(event) {
5 event = event || window.event;
6 var obj = event.srcElement ? event.srcElement : event.target;
7 if (obj.tagName === 'P') {
8 if (event.type === 'mousemove')
9 obj.style.backgroundColor = '#eee’;
10 else if (event.type === 'mouseout')
11 obj.style.backgroundColor = '#fff';
12 }
13 };
14 if (window.addEventListener) {
15 main.addEventListener('mousemove', mouseeventHandler, false);
16 main.addEventListener('mouseout', mouseeventHandler, false);
17 } else if (window.attachEvent) {
18 main.attachEvent('on'+'mousemove', mouseeventHandler);
19 main.attachEvent('on'+'mouseout', mouseeventHandler);
20 }
21 }
0
是不是backgroundColor的值书写不规范的原因
