जवाबों:
Mouseleave इवेंट माउसआउट से भिन्न होता है जिस तरह से यह ईवेंट बबलिंग को संभालता है। यदि इस उदाहरण में माउसआउट का उपयोग किया गया था, तो जब माउस पॉइंटर इनर एलिमेंट से बाहर चला जाता है, तो हैंडलर को ट्रिगर किया जाएगा। यह आमतौर पर अवांछनीय व्यवहार है। दूसरी ओर, मूसलीव इवेंट, केवल अपने हैंडलर को चलाता है जब माउस उस तत्व को छोड़ता है जो उसके लिए बाध्य है, न कि एक वंशज। तो इस उदाहरण में, हैंडलर को ट्रिगर किया जाता है जब माउस बाहरी तत्व को छोड़ देता है, लेकिन आंतरिक तत्व को नहीं।
ऐसा समय हो सकता है जब इससे mouseoutबेहतर विकल्प हो mouseleave।
उदाहरण के लिए, मान लें कि आपने एक टूलटिप बनाया है जिसे आप एक तत्व के बगल में प्रदर्शित करना चाहते हैं mouseenter। आप setTimeoutटूलटिप को तुरंत पॉप अप करने से रोकने के लिए उपयोग करते हैं। यदि माउस छोड़ता है तो टूलटिप प्रदर्शित नहीं होगा, तो आपने समय-समय पर mouseleaveउपयोग को साफ कर दिया clearTimeout। यह समय का 99% काम करेगा।
लेकिन अब मान लीजिए कि आप तत्व एक टूलटिप से जुड़ी एक साथ एक बटन है चलो clickघटना है, और यह भी उपयोगकर्ता के साथ या तो एक मान इस बटन संकेतों जाने confirmया alertबॉक्स। उपयोगकर्ता बटन और alertआग पर क्लिक करता है । उपयोगकर्ता ने इसे बहुत तेज़ी से दबाया कि आपके टूलटिप को पॉप अप करने का मौका नहीं मिला (अब तक बहुत अच्छा)।
उपयोगकर्ता alertबॉक्स ओके बटन दबाता है , और माउस तत्व छोड़ देता है। लेकिन चूंकि ब्राउज़र पृष्ठ एक बंद स्थिति में है, कोई जावास्क्रिप्ट जब तक ठीक बटन दबाया गया है आग, अपने अर्थ होगा mouseleaveघटना सक्रिय नहीं होगा । उपयोगकर्ता द्वारा दबाए जाने के बाद टूलटिप पॉपअप हो जाएगा (जो आप चाहते थे वह नहीं है)।
mouseoutइस मामले में उपयोग करना उचित समाधान होगा क्योंकि यह आग लगाएगा।
mouseoutकि उस मामले में आग क्यों लगेगी? क्या ब्राउज़र अभी भी बंद स्थिति में नहीं होगा mouseout?
jQuery एपीआई डॉक्टर:
mouseout
ईवेंट बबलिंग के कारण यह ईवेंट प्रकार कई सिरदर्द पैदा कर सकता है। उदाहरण के लिए, जब माउस पॉइंटर इस उदाहरण में इनर एलिमेंट से बाहर जाता है, तो एक माउसआउट ईवेंट उस पर भेजा जाएगा, फिर आउटर तक ट्रिकल करें। यह बाध्य माउसआउट हैंडलर को इनोपपोर्ट्यून समय पर ट्रिगर कर सकता है। उपयोगी विकल्प के लिए .mouseleave () के लिए चर्चा देखें।
तो mouseleaveएक कस्टम घटना है, जो उपरोक्त कारण से डिजाइन की गई थी।
जब माउस चयनित तत्व को छोड़ता है और जब माउस छोड़ता है तो इवेंट माउसआउट ट्रिगर हो जाता है।
इवेंट Mouseleave तत्व तब ट्रिगर होगा जब पॉइंटर केवल चयनित तत्व को छोड़ देगा।
संदर्भ: W3School