تغییر کد
سلام.
نمیدونم چرا وقتی من کدی که سر کلاس نوشتیم رو تست میکنم هر از گاهی موقع قرار گرفتن ماوس روی 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>
سلام
این اتفاق به خاطر padding پیش‌فرض body یا margin پیش‌فرض اولین فرزند body اتفاق میافته.
درست هست ولی به نظرم این مدل بهینه نیست.
با توجه به ویژگی هایی که از ایونت ها گفتیم سعی کنید مدل بهینه تری پیدا کنید (آیا میتونید حلقه را کلا حذف کنید؟)
سلام خسته نباشید
اون قسمت هایی که موس روش حرکت میکنه و باعث میشه رنگ body عوض شه جز body نیست
شما اگر از inspect با استفاده از ابزار selector حرکت کنی روی صفحه متوجه میشی که
if (hoverdElem.tagName != 'BODY'){
hoverdElem.style.backgroundColor = 'gray';
}که کد درسته او نقاطی که باعث میشه رنگ عوض بشه نقاط html صفحه هستش. (و html هم توی این شرط صدق میکنه).
*{
padding: 0;
margin: 0;
}
body{
height: 1000px;
}این هارو اگه توی استایل صفحت بذاری مطمئنا خودت متوجه میشی.
سلام. من کد رو این شکلی نوشتم. حلقه کامل حذف شده که بهینه تر باشه.
'use strict';
document.onmousemove = function (event) {
let hoveredElement = document.elementFromPoint(event.clientX, event.clientY);
if (hoveredElement.tagName !== 'BODY' && hoveredElement.tagName !== 'HTML') {
hoveredElement.style.backgroundColor = '#479377';
}
hoveredElement.addEventListener('mouseleave',function (){
hoveredElement.style.backgroundColor = '';
});
}
در مورد این خط کد:
event = event || window.event;
طبق پیامی که از webstorm گرفتم، deprecate شده و با وجود اینکه مرورگر های قدیمی ازش پشتیبانی نمیکنن باز هم بهتره که استفاده نشه
همینطور در مورد این بخش از کد که در تمرین گفته شد:
if (event.pageX == null && event.clientX != null) {
event.pageX = event.clientX + document.body.scrollLeft;
event.pageY = event.clientY + document.body.scrollTop;
}مقدار document.body.scrollTop یا document.body.scrollTop همواره صفر برمیگردونن ولی من clientX , clientY که استفاده کردم داره به درستی کار میکنه و روی اسکرول صفحه هم مشکلی نداره.
چرا این دو مقداری گفتم داره صفر برمیگرده با وجود اینکه کد من با کد استاد تفاوتی نداره؟
سلام من کد رو به صورت زیر تغییر دادم حلقه کلا حذف شد و onmouseleave رو داخل همون متد onmousemove تعریفش کردم که درنتیجه در یک عملیات اجرا میشه و با اینکار از مختصاتی که توسط elementFromPoint در فانکشن اول تعریف کرده بودیم میشه استفاده کرد که کد کمتر میشه.
فقط یه نکته ای که هست دوستمون هم اشاره کرده مقدار scrollTop صفر برمیگردونه تو کنسول حتی وقتی که محتوای body رو زیاد کردم که صفحه اسکرول بخوره ،
مساله دیگه اینکه وقتی صفحه اسکرول میخورد ، کد به خطا میخورد و متد ها اثر نمیکردن و برای اینکه متوجه بشم چه خطایی میده کنسول گرفتم مختصات موس رو که دیدم tagName رو میگه پروپرتیش آندیفاینه (فقط وقتی که اسکرول میخوره صفحه) ، برای حل کار نکردن کد تو محیطی که اسکرول خورده به جای event.pageX و event.pageY از document.elementFromPoint(event.clientX, event.clientY) استفاده کردم و مشکل حل شد که فکر کنم بخاطر اینه که clientX و clientY مختصات رو نسبت به window یا ویو مرورگر کاربر محاسبه میکنه ولی در pageX و pageY مختصات باید نسبت به document و اسکرول پیج محاسبه بشه که چون مقدار scrollTop صفر میشه نمیتونه این رو حساب کنه ، فقط این موضوع صفر شدن اسکرول رو استاد توضیح بدید عالی میشه ،
document.onmousemove = function (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.clientX, event.clientY);
if (hoveredElem.tagName != "BODY" && hoveredElem.tagName != "HTML") {
hoveredElem.style.backgroundColor = "gray";
}
hoveredElem.onmouseleave = function () {
hoveredElem.style.backgroundColor = null;
};
};