سلام.
نمیدونم چرا وقتی من کدی که سر کلاس نوشتیم رو تست میکنم هر از گاهی موقع قرار گرفتن ماوس روی body، رنگ body هم تغییر میکنه. حتی با کد پیوست شده هم همین مشکل پیش میاد. نمیدونم شاید مشکل از مرورگرهای منه.
من کد رو به این شکل تغییر دادم (بخش onmousemove رو هم بردم داخل تابع و حلقه for)، به نظر درست کار میکنه. میخواستم بپرسم به این شکل بنویسیم مشکلی نداره؟
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
<style>
.box {
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
}
#circle {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
border-radius: 100%;
top: 0;
}
.box div {
height: 200px;
}
</style>
</head>
<body style="text-align: center;">
<h1>سلام به همه دانشجویان عزیز و برنامهنویسان حرفهای آینده</h1>
<hr />
<div id="circle"></div>
<p>شماره ۱</p>
<div id="example1" class="box">
<div>باکس ۱</div>
<div>باکس ۲</div>
<div>باکس ۳</div>
<div>باکس ۴</div>
<div>باکس ۵</div>
</div>
<script>
'use strict';
console.log(example1.getBoundingClientRect());
function welcome(event) {
event = event || window.event;
if(event.pageX == null && event.clientX !== null) {
event.pageX = event.clientX + document.body.scrollLeft;
event.pageY = event.clientY + document.body.scrollTop;
}
let hoveredElem = document.elementFromPoint(event.pageX, event.pageY);
if(hoveredElem.tagName != 'BODY'){
hoveredElem.style.backgroundColor = 'gray';
}
}
function leaved(event) {
event = event || window.event;
event.target.style.backgroundColor = '';
}
for(let elem of document.body.childNodes) {
if(elem instanceof Element) {
elem.onmousemove = welcome;
elem.onmouseleave = leaved;
}
}
</script>
</body>
</html>