يحدث حدث الماوس أكثر من مرة

https://stackoverflow.com/questions/4069558

28-09-2019
|

سؤال

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

ومع ذلك ، بالنسبة لحدث الماوس ، سيؤدي ذلك إلى بعض النتائج غير المتوقعة.

الق نظرة على هذا المثال:

<html>
    <head>
        <script type="text/javascript">
            function init(){
                document.getElementById('par').onmouseout=function(){alert('mouse out')};
            }
    </script>
    </head>
    <body onload='init()'>
        <div id="par" style="width:400px;height:300px">
            <div style="background-color:red;width:100%;height:150px"></div>
            <div style="background-color:black;width:100%;height:150px"></div>
        </div>
    </body>
</html>

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

كيف تصلحها؟

المحلول

هذا غير ممكن باستخدام JavaScript العادي بدون ترك الماوس الحدث ، الذي ، على حد علمي ، مدعوم فقط من قبل Internet Explorer.

قد توفر مجموعات أدوات JavaScript حلاً ، jQuery على سبيل المثال محاكاة هذا الحدث:

ال mouseleave الحدث يختلف عن mouseout في الطريقة التي يتعامل بها مع الفقاعات الحدث. إذا mouseout تم استخدامه في هذا المثال ، ثم عندما انتقل مؤشر الماوس من داخليالعنصر ، سيتم تشغيل المعالج. هذا عادة ما يكون سلوك غير مرغوب فيه. ال mouseleave الحدث ، من ناحية أخرى ، لا يؤدي إلا إلى معالجه عندما يترك الماوس العنصر الذي يرتبط به ، وليس سليلًا. لذلك في هذا المثال ، يتم تشغيل المعالج عندما يغادر الماوس خارجي العنصر ، ولكن ليس داخلي عنصر.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow