تحديد ما إذا كان موضع الماوس بالقرب من حواف المتصفح

Question

في المتصفح ، أحاول تحديد ما إذا كانت النقطة التي تمثل موضع الماوس هي في ما أسميه "المنطقة الخارجية". على سبيل المثال ، في الصورة المرفقة ، المنطقة الخارجية هي التي لها خلفية زرقاء.

في الكود والصورة W يمثل عرض منفذ العرض للمتصفح ، بينما يمثل H الارتفاع ، و X ، Y لموضع الماوس

الآن ، أنا أستخدم قطعة الكود هذه للقيام بذلك:

if (((x>0 && x<w1) || (x>w2 && x<W))
    ||
    ((x>w1 && x<w2) &&
      ((y>0 && y<h1) || (y>h2 && y<H))
    ))
    console.log("we are in the outer area")

على الرغم من أنه يعمل كما هو ، فأنا أتساءل عما إذا كان هناك طريقة أفضل لذلك؟

Answer 1

لا تحتاج إلى التحقق مما إذا كان أكثر من 0 وأقل من W ، نظرًا لأن موضع المؤشر X لا يمكن أن يكون أقل من 0 أو أكثر من W. ينطبق نفسه على محور Y. يجب أن يكون ما يلي كافيا:

if((x>w2 || x<w1) || (y>h2 || y<h1)){
  console.log("We are in the outer area");
}

Answer 2

يمكنك لف صفحتك بأكملها في Div (تسمى outer) ثم الاتصال بـ hover حدث.