तत्व बंद हो जाने पर ऑनमाउसआउट नहीं निकाल दिया गया

Question

मेरे पास एक माउसओवर ईवेंट है जो टूलटिप को ट्रिगर करता है; जब माउस हटा दिया जाता है तो मैं इस टूलटिप को दूर जाना चाहता हूं। ऑनमोसाउट अच्छी तरह से काम करता है, को छोड़कर जब तत्व दूर हो जाता है। , जब मैं क्लिक करें "मुझे निकालें" मेरी माउस अब नहीं है:

<div id="bar"> 
    <div onmouseover="document.bgColor='gray'" onmouseout="document.bgColor='white'" style="border:1px solid black;"> 
    <span onclick="document.getElementById('bar').innerHTML = ''">Remove me</span> 
    </div> 
</div> 

समस्या यह है:

यहाँ एक आसुत उदाहरण जो पृष्ठभूमि (ताकि आप आसानी से चला सकते हैं) टूलटिप्स के बजाय बदल जाता है का उपयोग करता है "ओवर" div, लेकिन onmouseout ट्रिगर नहीं करता है, क्योंकि यह चला गया है। जब मैं "मुझे हटाएं" पर क्लिक करता हूं, तो मैं इस उदाहरण के लिए एक सफेद पृष्ठभूमि पर वापस जाने के लिए क्या चाहता हूं।

एक स्पष्ट समाधान है, जिसे मैं टालना चाहता हूं। मैं ऑनक्लिक हैंडलर नहीं चाहता हूं जो दस्तावेज़ को मैन्युअल रूप से "ठीक करने" के लिए तत्व को हटा देता है। ऐसा इसलिए है क्योंकि मनमाने ढंग से कई हैंडलर हो सकते हैं जो ऑनमोसआउट के साथ div को हटा सकते हैं। सामान्यतः, सभी माउसआउट और हटाने वाले हैंडलर गतिशील रूप से उत्पन्न किए जा सकते हैं, और एक-दूसरे के बारे में जानना आवश्यक है। चीजों को और जटिल बनाने के लिए, मेरे पास ऐसा मामला हो सकता है जहां हटाने योग्य तत्व एक-दूसरे में घोंसले होते हैं, और उनमें से कोई भी हटाया जा सकता है। (मैं इस बाधा को दूर करने में सक्षम हो सकता है, लेकिन यह एक छोटे काम का समय लगेगा।)

---

यहाँ एक समाधान है कि काम कर सकता का एक उदाहरण है: माउसओवर पर, रजिस्टर के रूप में "सक्रिय" क्रिया संबंधी संवाद; फिर जब भी तत्व हटा दिए जाते हैं, तो सभी मोडल संवादों पर पुनरावृत्त होते हैं और उन लोगों की तलाश करते हैं जो दस्तावेज़ में नहीं हैं। लेकिन इसके लिए मुझे संवाद की वैश्विक दुकान रखने की आवश्यकता है, और समय ओ (एन * एम) लेता है, जहां एन सक्रिय संवाद की संख्या है, और एम डीओएम में संवाद को कितना गहराई से घिरा हुआ है। इसके अलावा, जब भी मैं तत्वों को हटा देता हूं, तब भी मुझे इस ऑपरेशन को चलाने की आवश्यकता होती है, भले ही यह स्पष्ट हो कि कुछ भी प्रभावित नहीं होता है।

यहां एक और समाधान है जो काम कर सकता है: यदि आप एक ऑनरेडफ्रॉम डॉक्यूमेंटेशन इवेंट को कार्यान्वित कर सकते हैं, तो हम ऑनमौसआउट हैंडलर को ऑनरेड फॉर डॉक्यूमेंट इवेंट के रूप में कॉपी करते हैं, और उदाहरण सही ढंग से भी काम करेगा। (मैंने सुना है कि jQuery इसका समर्थन कर सकता है, लेकिन मुझे गैर-jQuery कोड के साथ अंतःक्रिया करने की आवश्यकता है।)

यहां एक और संभावित समाधान है: प्रत्येक मोडल संवाद बार-बार मतदान करता है यह देखने के लिए कि उसके माता-पिता दस्तावेज़ में हैं या नहीं। जब यह नहीं है, तो यह seppuku प्रतिबद्ध है। लेकिन मतदान वास्तव में बदसूरत है। (मुझे लगता है कि अगर कुछ भी बेहतर नहीं है तो मैं ऐसा करने के इच्छुक हूं!)

यहां एक और विचार है: ऑन-हाउसआउट तत्व को पहले क्लिक तत्व को कैप्चर करने की अनुमति देने के लिए ईवेंट कैप्चर का उपयोग करें, और यह जांचने के लिए टाइमर सेट करें कि यह अभी भी है या नहीं क्लिक करने के बाद दस्तावेज़ में।

---

संदर्भ के लिए, मैं वास्तव में ऐसा करने की कोशिश कर रहा हूं: मेरे पास एक जेएस विजेट है जो एक जटिल वृक्ष संरचना बनाता है। विजेट में कई संपादनों में पेड़ में कुछ बटन क्लिक करना शामिल है, जो तब पेड़ से जोड़ता है या हटा देता है (संभवतः खुद को हटा रहा है।) हालांकि, कुछ नोड्स को अधिक जटिल संपादन प्रक्रियाओं की आवश्यकता होती है, इसलिए मैं एक टूलटिप लाना चाहता हूं निर्देशों और संभावित रूप से अधिक बटन के साथ जब उपयोगकर्ता उन पर मकान करता है, या उपयोगकर्ता द्वारा क्लिक किए जाने पर संवाद भी जारी रखता है। लेकिन उपयोगकर्ता अपना दिमाग बदल सकता है और नोड, या नोड के किसी भी माता-पिता को हटाने का फैसला कर सकता है, जिस स्थिति में वार्तालाप दूर जाना चाहिए। आप वर्तमान में here के कार्यान्वयन को देख सकते हैं, जहां संवाद मैन्युअल रूप से बनाए जा रहे हैं। मैं एक अच्छी टूलटिप लाइब्रेरी का उपयोग शुरू करना चाहता हूं, लेकिन उनमें से सभी को ऊपर वर्णित बग है।

Answer 1

कोशिश:

<script> 
    var liveToolTip = new Array(); 
    function addLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
     }else{ 
      liveToolTip[elName]=1;} 
    } 
    function removeLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
      delete liveToolTip[elName]; 
     } 
    } 
    function runOnMouseOuts() { 
     for(mouseOut in liveToolTip) { 
      document.getElementById(mouseOut).onmouseout(); 
     } 
    } 
</script> 
<div id="bar"> 
    <div onmouseover="addLiveToolTip(this.id);document.bgColor='gray'" 
     onmouseout="removeLiveToolTip(this.id);document.bgColor='white'" style="border:1px solid black;" id="foo"> 
     <span onclick="document.getElementById('bar').innerHTML = '';runOnMouseOuts()"> 
     Remove me</span> 
    </div> 

Answer 2

आधुनिक ब्राउज़रों पर, वहाँ DOMNodeRemoved घटना है। तो:

var div = document.getElementsByTagName('div')[0]; 
div.addEventListener('DOMNodeRemoved', function(e){ 
    document.bgColor='white'; 
});​ 

http://jsfiddle.net/HX88L/

बुरी बात यह है कि घटना को पहले से ही deprecated है। तथाकथित mutation events के प्रतिस्थापन ऐसा लगता है कि यह अभी तक उपयोग करने के लिए तैयार नहीं है। एमडीएन दस्तावेज़ पृष्ठ अभी भी stub है।