JavaScript-原生JS鼠标移动,移出事件,IE7/8下没效果,求解

小组聊天灌水 小组聊天灌水 主题:993 回复:2175

JavaScript-原生JS鼠标移动,移出事件,IE7/8下没效果,求解

偏爱自由 发布于 2017-07-03 字数 1864 浏览 1140 回复 3
<!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>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

甜柠檬 2017-08-23 3 楼

代码中的问题在于,在IE7/8中this指向了window。关于this指向的文章有很多介绍,可以在网上搜下。

解决代码如下,供参考:

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";
};
}

    };
清晨说ぺ晚安 2017-07-28 2 楼

obj.attachEvent('onmousemove', function (){});里的事件名称在IE下是需要加"on"的,你加上on就可以了

虐人心 2017-07-18 1 楼

jQuery中有个proxy,可以很好的处理这种情况,
请参考这里的讲解:

http://liang-zhao.diandian.com/post/2012-01-12/14653122