为什么鼠标移上去还没移走就触发了onmouseout事件颜色就变绿了，不是应该鼠标移出才变色的吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{overflow:auto;width:200px;height:200px;
border:2px solid gray;margin-bottom:20px;}
#content{width:200px;height:100px;border:2px solid gray;}
</style>
</head>
<body>
<div id="div">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod,tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo,consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse,cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non,proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
<div id="content"></div>
<script type="text/javascript">
//获取文本dom
var art=document.getElementById("div");
art.onscroll=function(){
this.style.color="red";
document.getElementById("content").innerHTML=("内容滚动了")
}
art.onmouseout=function () {
this.style.color="green";
}
</script>
</body>
</html>17
收起
正在回答
4回答
这个原因可能是div还有一个子元素p，而我们的鼠标事件绑定在div上，当你从右侧移入文字时，进入了p，它也算作你从div离开了。
你会发现，当你移动滚动条时，字体颜色变成红色后，你又把鼠标移向文字而不是离开div，它还是会再变成绿色。
要达到题目要求那样，需要把文字变成红色绑定在div.onmousemove事件上，这样的话，你的鼠标只要在div的区域内移动，就都会执行文字变红色，离开这个区域它就变成绿色，这样就能实现要求的效果。
M_Force
2018-04-10 19:54:09
我是这么写的，例子的效果应该也是这样的，你试试
<script type="text/javascript">
var fontDiv=document.getElementById("div");
var contentDiv=document.getElementById("content");
fontDiv.onscroll=function(){
contentDiv.innerHTML="内容滚动了";
}
fontDiv.onmousedown=function(){
fontDiv.style.color="red";
}
fontDiv.onmouseup=function(){
fontDiv.style.color="green";
}
</script>
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星