首页 新闻 搜索 专区 学院

原生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>
artwl的主页 artwl | 专家六级 | 园豆:16526
提问于:2012-02-20 10:00
< >
分享
最佳答案
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
写代码的小2B | 老鸟四级 |园豆:4346 | 2012-02-20 10:50

谢谢,你的代码可用,但不知道我的写法哪儿错了

artwl | 园豆:16526 (专家六级) | 2012-02-20 11:02

@artwl: 弄明白了哈,在IE7/8中this指向了window,结帖哈

artwl | 园豆:16526 (专家六级) | 2012-02-20 11:33
其他回答(2)
0
改为: obj.attachEvent('on...', ...); 另外下面的拼写错误
收获园豆:20
ChatinCode | 园豆:2272 (老鸟四级) | 2012-02-20 10:10

谢谢,我改为:

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 或未定义”错误,能帮忙看看吗?

支持(0) 反对(0) artwl | 园豆:16526 (专家六级) | 2012-02-20 10:17

@artwl: IE绑定(attachEvent)下,this 指的是window对象

支持(0) 反对(0) ChatinCode | 园豆:2272 (老鸟四级) | 2012-02-20 11:21

@artwl: 我抄一段书吧:

IE绑定的优点
可以为同一元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件

IE绑定的缺点
IE仅支持事件捕获的冒泡阶段
事件监听函数内的this关键字指向了window对象,而不是当前元素
事件对象仅存在于window.event参数中
事件必须以ontype的形式命名,比如,onclick而非click
仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

支持(0) 反对(0) ChatinCode | 园豆:2272 (老鸟四级) | 2012-02-20 11:32

@artwl: 而且你的捕获也是否应该写在 main 元素上

支持(0) 反对(0) ChatinCode | 园豆:2272 (老鸟四级) | 2012-02-20 11:33

@ChatinCode: 嗯,弄明白了,谢谢哈

支持(0) 反对(0) artwl | 园豆:16526 (专家六级) | 2012-02-20 11:35

@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) 反对(0) ChatinCode | 园豆:2272 (老鸟四级) | 2012-02-20 12:34
0

是不是backgroundColor的值书写不规范的原因

竹--石 | 园豆:5 (初学一级) | 2012-02-20 10:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册