जावास्क्रिप्ट: एकाधिक mouseout ईवेंट के कारण

Question

मैं जावास्क्रिप्ट (WC3 मॉडल बनाम माइक्रोसॉफ्ट मॉडल) में अलग अलग घटना मॉडल के बारे में पता कर रहा हूँ, और साथ ही उत्साह से भरा हुआ और कैप्चरिंग के बीच का अंतर। हालांकि, इस मुद्दे के बारे में विभिन्न लेखों को पढ़ने में कुछ घंटों के बाद, मुझे अभी भी अनिश्चितता है कि निम्न प्रतीत होता है कि सरल तरीके से सरल व्यवहार कैसे करें:

यदि मेरे पास बाहरी div और एक आंतरिक div तत्व है, तो मुझे एक माउस- जब माउस बाहरी-div छोड़ देता है तो घटना को ट्रिगर किया जाता है। जब माउस आंतरिक-div से बाहरी-div तक जाता है, तो कुछ भी नहीं होना चाहिए, और जब माउस बाह्य-div से आंतरिक-div तक पार हो जाता है तो कुछ भी नहीं होना चाहिए। घटना केवल आग होनी चाहिए यदि माउस बाह्य-div से आसपास के पृष्ठ तक चलता है।

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" > 
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div> 
</div> 

अब

, अगर मैं बाहरी-div पर "mouseout" घटना, दो mouseout घटनाओं निकाल दिया जाता है जगह जब आसपास पृष्ठ पर भीतरी div से माउस चालें, क्योंकि घटना की आग एक बार जब माउस आंतरिक से बाहरी तक चलता है, और फिर फिर जब यह बाहरी से आसपास के पृष्ठ तक चलता है।

मुझे पता है कि मैं ev.stopPropagation() का उपयोग करके ईवेंट को रद्द कर सकता हूं, इसलिए मैंने ईवेंट प्रचार को रद्द करने के लिए आंतरिक-div के साथ एक ईवेंट हैंडलर को पंजीकृत करने का प्रयास किया। हालांकि, यह घटना को फायरिंग से नहीं रोकेगा जब माउस बाह्य-div से आंतरिक-div तक चलता है।

तो, जब तक मैं कुछ अनदेखी कर रहा हूँ, यह मेरे लिए इस व्यवहार जटिल माउस ट्रैकिंग कार्यों के बिना पूरा नहीं किया जा सकता है लगता है। भविष्य में, मैं JQuery की तरह एक और उन्नत ढांचे का उपयोग करके इस कोड को बहुत से कार्यान्वित करने की योजना बना रहा हूं, लेकिन अभी के लिए, मैं सोच रहा हूं कि नियमित जावास्क्रिप्ट में उपर्युक्त व्यवहार को लागू करने का एक आसान तरीका है या नहीं।

Answer 1

भीतरी div पर mouseout घटना बाहरी div करने के लिए 'बुलबुले'। पता लगाने के लिए कि यह बाहरी div से हुआ है, event की target संपत्ति की जाँच करें:

<div id="outer"> 
    <div id="inner">x</div> 
</div> 

document.getElementById('outer').onmouseout= function(event) { 
    // deal with IE nonsense 
    if (event===undefined) event= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 

    if (target!==this) return; 
    ... 
}; 

mouseout के साथ सामान्य समस्या आप इसे पाने के किया जाता है जब पॉइंटर "बाहर" माता पिता की भले ही यह केवल बच्चे को "अंदर" ले जा रहा हो। आप तत्व माउस में बढ़ रहा है के पूर्वज सूची देख कर मैन्युअल रूप से इस मामले का पता लगाने कर सकते हैं:

var other= 'relatedTarget' in event? event.relatedTarget : event.toElement; 
    while ((other= other.parentNode).nodeType===1) 
     if (other===this) return; 

यह mousein/mouseout मॉडल है: यह केवल रुचि के बारे में जो तत्व माउस के तत्काल माता पिता है। क्या आप अधिक बार चाहते mouseenter/mouseleave मॉडल है, जो एक पूरे के रूप तत्व पेड़ पर विचार करता है, तो आप केवल mouseleave मिलता था जब सूचक तत्व या अपनी सन्तान छोड़ने गया था और में सीधे नहीं चलती तत्व-या- अपने-वंश।

दुर्भाग्य mouseenter/mouseleave वर्तमान में एक IE-केवल घटना जोड़ी है। उम्मीद है कि अन्य ब्राउज़र इसे उठाएंगे क्योंकि यह डीओएम स्तर 3 घटनाओं का हिस्सा होने की उम्मीद है।