لا يحتوي JavaScript على كائن ماوس ، ويعتمد على كائن حدث قوي للحصول على إحداثيات الماوس.
من خلال الاستماع إلى mousemove من المستند ، يمكننا الحصول على وضع الماوس في الوقت الحقيقي.
لكن! ! هناك الكثير من السمات المتعلقة بالماوس في الحدث ، وهو أمر مثير للغاية! على النحو التالي:
| Event.Layerx | event.layery |
| event.clientx | event.clienty |
| event.pagex | event.pagey |
| event.offsetx | event.offsety |
| Event.Screenx | Event.Screeny |
| Event.x | حدث |
ما مجموعه 6 مجموعات!
علاوة على ذلك ، فإن اختلافاتهم ليست واضحة ، والمتصفحات غير متوافقة!
الغرض من هذه المقالة هو توضيح خلافاتهم وتحديد تلك التي لا ينصح بها.
رمز الاختبار
قم بتشغيل الرمز التالي مباشرة:
نسخة الكود كما يلي:
<! doctype html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<head> <br />
<meta charset = "utf-8" /> </p>
<style>
الجسم {الموضع: قريب ؛}
div {min-leight: 300px ؛ لون الخلفية: #EEE ؛}
#jg {right: 0 ؛ أعلى: 10 بكسل ؛ الموقف: ثابت ؛ لون الخلفية: #f00 ؛}
</style>
<p> </head> <br />
<Body> <br />
<span id = "jg"> إظهار النتائج < /span> <br />
<type type = "button" value = "A button" /> </p>
<viv> div على الشاشة </div>
<div style = "الارتفاع: 1000px ؛ العرض: 2000px ؛ الخلفية: #DDD ؛"> عالية جدا وعريضة. . . </div>
<div> خارج الشاشة Div </viv>
<p> </body> <br />
<script>
var jg = document.getElementById ('jg') ؛
document.onmousemove = function (e) {
e = e || window.event ؛
jg.innerhtml = 'layerx:'+e.layerx+
'، الطبقات:'+e.layery+
'، <br/> clientx:'+e.clientx+
'، العميل:'+e.clienty+
'، <br/> pagex:'+e.pagex+
'، pagey:'+e.pagey+
'، <br/> offsetx:'+e.offsetx+
'، Offsety: "+E.Offsety+
'، <br/> screenx:'+e.screenx+
'، Screeny:'+E.Screeny+
'، <br/> x:'+e.x+
'، y:'+ey ؛
}
</script> <br />
</html>
أثناء الاختبار ، وجدت أداة سحرية: Chrome (Google Chrome) و IE9 متوافقة مع جميع السمات المذكورة أعلاه! إنه مناسب جدًا لمقارنتها.
بعد المقارنة ، تكون النتائج كما يلي:
تعريف كل سمة
ClientX و Y هما إحداثيات الماوس بالنسبة إلى منفذ عرض المتصفح (أي ، يتم تجاهل الجزء خارج شريط التمرير) ؛ جميع المتصفحات تدعمها.
ScreenX و Y هما إحداثيات الماوس بالنسبة إلى اليسار (الحافة العلوية) للشاشة بأكملها ، والتي هي في الأساس غير متوقفة مع المستند ؛ انها متوافقة تماما.
OffsetX و Y هي إحداثيات الماوس بالنسبة للكائن المشار إليه حاليًا. عندما يشير الماوس إلى الزر في هذا الوقت ، يكون OffsetX نسبة إلى هذا الزر ؛ Firefox لا يدعم
X و Y و Layerx و Y في نفس المتصفح القياسي ، هي سمات يمكن استخدامها لاستبدال Layerx في IE.
Pagex و Y هما إحداثيات الماوس بالنسبة إلى اليسار (الحافة العلوية) للصفحة بأكملها ، بما في ذلك خارج منفذ العرض ؛ IE7 و 8 لا تدعم ذلك.
النقاط الرئيسية: Layerx والطبقات
Layerx و Y هي سمات جديدة صدرت من قبل المتصفحات القياسية ، كما يدعمهما IE9. يمكن استخدامه بدلاً من OffsetX و Y. ومع ذلك ، فإن تعريفه هو: إحداثيات العنصر مع معلومات تحديد المواقع بالنسبة لعنصر التأشير الحالي. يشير هذا "الموضع" إلى سمة CSS (على سبيل المثال ، غير منتظمة) التي تحتوي على مواقع غير مقدمة.
إذا تم وضع العنصر المدبب حاليًا ، فسيقوم Layerx و Y بإرجاع الإحداثيات بالنسبة لهذا العنصر ؛ خلاف ذلك ، تحقق من العلامة الأصل لهذا العنصر ؛ إذا لم يكن هناك أي موقع ، تابع ؛ حتى عنصر الجذر - عقدة HTML.
لذلك ، في Firefox ، إذا كنت ترغب في تعويض القيمة ، فيجب عليك إضافة معلومات موضع الموضع!
ملخص التوافق:
1.
2. x و y في IE تعادل Layerx والطبقات في Firefox & Chrome ؛
3. حدود وثيقة IE7 و 8 هي 2 بكسل بعيدا عن حدود نافذة المتصفح ، لذلك الشاشة لديها مسافة لا تقل عن 2 بكسل عند تعظيم النافذة ؛
4. على الرغم من أن Layerx و y في IE9 لهما قيم ، إلا أنهما غير صحيحين بشكل غير مفهوم. يبدو أنها مرتبطة بعلامة HTML. على سبيل المثال ، في رمز المثال الخاص بي ، اسحب شريط التمرير إلى أقصى اليمين ، ويتحرك الماوس ببطء من الفراغ إلى Div الكبير. في هذا الوقت ، سيتم أيضًا إدراج الفرق بين أقصى اليمين واليمين من DIV الأول في Layerx. . . نظرًا لوجود المزيد والمزيد من العناصر في النهاية ، كلما كان الحساب أكثر تعقيدًا ؛ في حين أن طبقة Firefox و Chrome ليس لديها هذه المشكلة. لذلك ، لا تستخدم Layerx في IE9.
5. في Chrome ، على الرغم من أن X و Y لهما قيم ، إلا أنهما هو نفسه تمامًا مثل ClientX و Y! لذلك ، لا ينصح باستخدام سمات x ، y.
علاج التوافق
في المتصفحات القياسية ، يمكن استخدام position و event.layerx لتنفيذ سمة event.offsetx ؛
لا يوجد pagex أو pagey في IE7. يمكنك فقط استخدام document.documentElement.scrollleft+event.clientx للعثور عليه.
لذلك ، يمكن إزالة واحدة من X أو Y أو OffsetX و OffsEty في IE.