दिलचस्प पोस्ट

JQuery के बिना माता पिता के पूर्ण दायरे के बच्चे तत्व को मँडरा करते हुए ऑनसाइट पर रोकें

मुझे एक पूर्ण पॉइंटेड डिवेल में ऑनहाउसआउट फ़ंक्शन के साथ परेशानी हो रही है जब माउस div में एक बच्चा तत्व को मारता है, तो माउसआऊट ईवेंट आग लगाता है, लेकिन मैं नहीं चाहता कि जब तक माउस मातृभाषा से बाहर न हो, तो निरपेक्ष div।

Jquery के बिना एक बच्चे तत्व को मारता है, तो मैं कैसे गोलीबारी से mouseout घटना को रोका जा सकता है

मुझे पता है कि इस घटना को बुदबुदाती करने के लिए कुछ है, लेकिन मुझे यह जानने में कोई नसीब नहीं है कि यह कैसे काम करे।

मुझे यहां एक समान पोस्ट मिली: बाल तत्वों द्वारा ट्रिगर किए गए माउसआउट ईवेंट को अक्षम कैसे करें?

हालांकि यह समाधान jQuery का उपयोग करता है

Solutions Collecting From Web of "JQuery के बिना माता पिता के पूर्ण दायरे के बच्चे तत्व को मँडरा करते हुए ऑनसाइट पर रोकें"

 function onMouseOut(event) { //this is the original element the event handler was assigned to var e = event.toElement || event.relatedTarget; if (e.parentNode == this || e == this) { return; } alert('MouseOut'); // handle mouse event here! } document.getElementById('parent').addEventListener('mouseout',onMouseOut,true); 

मैंने एक त्वरित जेएसफ़िल्ड डेमो बनाया, जिसमें सभी सीएसएस और एचटीएमएल की जरूरत थी, इसे देखें …

क्रॉस-ब्राउज़र समर्थन के लिए फिक्स्ड लिंक संपादित करें http://jsfiddle.net/RH3tA/9/

ध्यान दें कि यह केवल तात्कालिक माता-पिता की जांच करता है, यदि माता-पिता ने बच्चों को नेस्टेड किया होता तो आपको किसी भी तरह से "मूल तत्व"

नेस्टेड बच्चों के लिए उदाहरण संपादित करें

संपादित करें क्रॉस-ब्राउज़र को उम्मीद के लिए स्थिर

 function makeMouseOutFn(elem){ var list = traverseChildren(elem); return function onMouseOut(event) { var e = event.toElement || event.relatedTarget; if (!!~list.indexOf(e)) { return; } alert('MouseOut'); // handle mouse event here! }; } //using closure to cache all child elements var parent = document.getElementById("parent"); parent.addEventListener('mouseout',makeMouseOutFn(parent),true); //quick and dirty DFS children traversal, function traverseChildren(elem){ var children = []; var q = []; q.push(elem); while (q.length > 0) { var elem = q.pop(); children.push(elem); pushAll(elem.children); } function pushAll(elemArray){ for(var i=0; i < elemArray.length; i++) { q.push(elemArray[i]); } } return children; } 

और एक नया JSFiddle , संपादित अद्यतन लिंक

कुछ सरल मामलों ( आईई 11 या नए ) में काम करने वाले सरल शुद्ध सीएसएस समाधान के लिए , एक बच्चों की pointer-events को none को सेट करके निकाल सकता है

 .parent * { pointer-events: none; } 

onmouseleave उपयोग करें

या, jQuery में, mouseleave() उपयोग करें mouseleave()

यह सही चीज है जिसे आप ढूंढ रहे हैं। उदाहरण:

 <div class="outer" onmouseleave="yourFunction()"> <div class="inner"> </div> </div> 

या, jQuery में:

 $(".outer").mouseleave(function(){ //your code here }); 

एक उदाहरण यहाँ है

नीचे क्या हुआ, इसके आधार पर यहां एक और अधिक सुरुचिपूर्ण समाधान है। यह बच्चों के एक से अधिक स्तर से बुदबुदाती घटना के लिए खाता है। यह क्रॉस-ब्राउज़र मुद्दों के लिए भी है

 function onMouseOut(this, event) { //this is the original element the event handler was assigned to var e = event.toElement || event.relatedTarget; //check for all children levels (checking from bottom up) while(e && e.parentNode && e.parentNode != window) { if (e.parentNode == this|| e == this) { if(e.preventDefault) e.preventDefault(); return false; } e = e.parentNode; } //Do something u need here } document.getElementById('parent').addEventListener('mouseout',onMouseOut,true); 

अमजद मासाद के लिए धन्यवाद ने मुझे प्रेरित किया

मेरे पास निम्न समाधान है जो IE9, एफएफ और क्रोम में काम करता है और यह कोड बहुत छोटा है (जटिल समापन और अनुप्रस्थ बाल चीजों के बिना):

  DIV.onmouseout=function(e){ // check and loop relatedTarget.parentNode // ignore event triggered mouse overing any child element or leaving itself var obj=e.relatedTarget; while(obj!=null){ if(obj==this){ return; } obj=obj.parentNode; } // now perform the actual action you want to do only when mouse is leaving the DIV } 

यदि आप jQuery का उपयोग कर रहे हैं तो आप "माउसलेवे" फ़ंक्शन का भी उपयोग कर सकते हैं, जो आपके लिए यह सब संबंधित है।

 $('#thetargetdiv').mouseenter(do_something); $('#thetargetdiv').mouseleave(do_something_else); 

do_something जब माउस thetargetdiv या उसके किसी भी बच्चे में प्रवेश करेगा आग, do_something_else ही आग जब माउस thetraargetdiv छोड़ देता है और इसके किसी भी बच्चे

मुझे लगता है कि Quirksmode के सभी उत्तरों आपको आवश्यक हैं (अलग-अलग ब्राउज़र बुदबुदाते व्यवहार और माउससेंटर / माउसलेव इवेंट), लेकिन मुझे लगता है कि उस घटना को बुदबुदाते हुए गड़बड़ का सबसे आम निष्कर्ष है, JQuery या Mootools जैसी एक रूपरेखा का उपयोग (जिसमें माउससेटर और माउसलीवे इवेंट्स, जो वास्तव में आपके द्वारा दिमाग में होता है)।

देखो कि वे यह कैसे करते हैं, यदि आप चाहते हैं, तो इसे स्वयं करें
या आप बस कस्टम भाग के साथ अपने कस्टम "दुबले मतलब" संस्करण बना सकते हैं (और इसकी निर्भरता)

mouseleave() आज़माएं mouseleave()

उदाहरण :

 <div id="parent" mouseleave="function"> <div id="child"> </div> </div> 

😉

मैंने एक बहुत ही सरल समाधान पाया है,

बस onmousleave = "myfunc ()" घटना का उपयोग करें onmousout = "myfunc ()" घटना से

मेरे कोड में यह काम किया !!

उदाहरण:

 <html> <head> <script type="text/javascript"> function myFunc(){ document.getElementById('hide_div').style.display = 'none'; } function ShowFunc(){ document.getElementById('hide_div').style.display = 'block'; } </script> </head> <body> <div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'> Hover mouse here <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'> CHILD <br/> It doesn't fires if you hover mouse over this child_div </div> </div> <div id="hide_div" >TEXT</div> <a href='#' onclick="ShowFunc()">Show "TEXT"</a> </body> </html> 

माउसउउट फ़ंक्शन के साथ एक ही उदाहरण:

 <html> <head> <script type="text/javascript"> function myFunc(){ document.getElementById('hide_div').style.display = 'none'; } function ShowFunc(){ document.getElementById('hide_div').style.display = 'block'; } </script> </head> <body> <div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'> Hover mouse here <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'> CHILD <br/> It fires if you hover mouse over this child_div </div> </div> <div id="hide_div">TEXT</div> <a href='#' onclick="ShowFunc()">Show "TEXT"</a> </body> </html> 

आशा करता हूँ की ये काम करेगा 🙂

इस को संभालने के दो तरीके हैं।

1) यह देखने के लिए कि क्या यह आपके पैरेंट डिव से मेल खाता है, आपके कॉलबैक में event.target परिणाम की जांच करें

 var g_ParentDiv; function OnMouseOut(event) { if (event.target != g_ParentDiv) { return; } // handle mouse event here! }; window.onload = function() { g_ParentDiv = document.getElementById("parentdiv"); g_ParentDiv.onmouseout = OnMouseOut; }; <div id="parentdiv"> <img src="childimage.jpg" id="childimg" /> </div> 

2) या कॉलबैक फ़ंक्शन में ईवेंट कैप्चरिंग और कॉल event.stopPropagation का उपयोग करें

 var g_ParentDiv; function OnMouseOut(event) { event.stopPropagation(); // don't let the event recurse into children // handle mouse event here! }; window.onload = function() { g_ParentDiv = document.getElementById("parentdiv"); g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children }; <div id="parentdiv"> <img src="childimage.jpg" id="childimg" /> </div> 

मैं इसे इसके साथ एक जादू की तरह काम करता हूं:

 function HideLayer(theEvent){ var MyDiv=document.getElementById('MyDiv'); if(MyDiv==(!theEvent?window.event:theEvent.target)){ MyDiv.style.display='none'; } } 

आह, और MyDiv टैग इस तरह है:

 <div id="MyDiv" onmouseout="JavaScript: HideLayer(event);"> <!-- Here whatever divs, inputs, links, images, anything you want... --> <div> 

इस तरह, जब style.display='none' एक बच्चा, भव्य-बच्चा, आदि को जाता है … style.display='none'style.display='none' निष्पादित नहीं होता है; लेकिन जब on_ouseout MyDiv से बाहर चला जाता है यह रन।

तो प्रसार को रोकने की कोई ज़रूरत नहीं, टाइमर का उपयोग करें, आदि …

उदाहरण के लिए धन्यवाद, मैं उनसे यह कोड बना सकता हूं

उम्मीद है कि यह किसी को मदद करता है

इस तरह भी सुधार किया जा सकता है:

 function HideLayer(theLayer,theEvent){ if(theLayer==(!theEvent?window.event:theEvent.target)){ theLayer.style.display='none'; } } 

और फिर डीआईवी टैग इस तरह से:

 <div onmouseout="JavaScript: HideLayer(this,event);"> <!-- Here whatever divs, inputs, links, images, anything you want... --> <div> 

इतना अधिक सामान्य, न केवल एक डिव के लिए और प्रत्येक परत पर id="..." जोड़ने की आवश्यकता नहीं है।

मैं तत्व के सीमा के पृष्ठ निर्देशांक प्राप्त करने के लिए मूल तत्व ऑफसेट की जांच करता हूं, फिर सुनिश्चित करें कि चूंकि माउसआउट उन सीमाओं से बाहर है, केवल माउसआउट कार्रवाई शुरू हो गई है। गंदा लेकिन यह काम करता है

 $(el).live('mouseout', function(event){ while(checkPosition(this, event)){ console.log("mouseovering including children") } console.log("moused out of the whole") }) var checkPosition = function(el, event){ var position = $(el).offset() var height = $(el).height() var width = $(el).width() if (event.pageY > position.top || event.pageY < (position.top + height) || event.pageX > position.left || event.pageX < (position.left + width)){ return true } } 
 var elem = $('#some-id'); elem.mouseover(function () { // Some code here }).mouseout(function (event) { var e = event.toElement || event.relatedTarget; if (elem.has(e).length > 0) return; // Some code here }); 

यदि आपने माता-पिता तत्व में एक सीएसएस वर्ग या आईडी को जोड़ा (या है), तो आप ऐसा कुछ कर सकते हैं:

 <div id="parent"> <div> </div> </div> JavaScript: document.getElementById("parent").onmouseout = function(e) { e = e ? e : window.event //For IE if(e.target.id == "parent") { //Do your stuff } } 

तो सामान केवल तब निष्पादित होता है जब घटना माता-पिता div पर होती है।

मैं सिर्फ तुम्हारे साथ कुछ साझा करना चाहता था
मुझे ng-mouseenter और ng-mouseleave इवेंट्स के साथ कुछ कठिन समय मिला।

मामले का अध्ययन:

मैंने एक अस्थायी नेविगेशन मेनू बनाया है जो टॉगल होता है जब कर्सर आइकन पर होता है।
यह मेनू प्रत्येक पृष्ठ के शीर्ष पर था

  • मेनू पर दिखाने / छिपाने को संभालने के लिए, मैं एक वर्ग को टॉगल करता हूं।
    ng-class="{down: vm.isHover}"
  • Vm.isHover टॉगल करने के लिए, मैं एनजी माउस घटनाओं का उपयोग करें।
    ng-mouseenter="vm.isHover = true"
    ng-mouseleave="vm.isHover = false"

अभी के लिए, सब कुछ ठीक था और उम्मीद के अनुसार काम किया
समाधान साफ ​​और सरल है

आने वाली समस्या:

किसी विशिष्ट दृश्य में, मेरे पास तत्वों की एक सूची है
मैंने एक एक्शन पैनल जोड़ा है, जब कर्सर सूची के एक तत्व से अधिक होता है।
मैंने व्यवहार को संभालने के लिए ऊपर के समान कोड का इस्तेमाल किया

समस्या:

मुझे पता चला कि मेरा कर्सर फ्लोटिंग नेविगेशन मेनू पर है और एक तत्व के शीर्ष पर, एक-दूसरे के बीच एक संघर्ष होता है।
कार्रवाई पैनल दिखाया और फ्लोटिंग नेविगेशन छिप गया था

बात यह है कि भले ही कर्सर फ्लोटिंग नेविगेशन मेनू पर है, तो सूची तत्व ng-mouseenter ट्रिगर होता है।
यह मेरे लिए कोई मतलब नहीं है, क्योंकि मैं माउस प्रसार घटनाओं के एक स्वचालित ब्रेक की उम्मीद करेंगे।
मुझे कहना चाहिए कि मैं निराश हो गया था और मैं उस समस्या को जानने के लिए कुछ समय बिताना चाहता हूं।

पहला विचार:

मैंने इन का उपयोग करने की कोशिश की:

  • $event.stopPropagation()
  • $event.stopImmediatePropagation()

मैंने बहुत सारे एनजी पॉइंटर इवेंट्स (म्यूसमेव, मॉउओवर, …) को जोड़ लिया लेकिन कोई मेरी मदद नहीं करता

सीएसएस समाधान:

मुझे एक सरल सीएसएस प्रॉपर्टी के साथ समाधान मिला, जो कि मैं अधिक से अधिक का उपयोग करता हूं:

 pointer-events: none; 

असल में, मैं इसे (मेरी सूची तत्वों) की तरह प्रयोग करता हूं:

 ng-style="{'pointer-events': vm.isHover ? 'none' : ''}" 

इस पेचीदा एक के साथ, एनजी-माउज ईवेंट अब ट्रिगर नहीं किए जाएंगे और मेरा फ्लोटिंग नेविगेशन मेनू तब बंद नहीं करेगा जब कर्सर खत्म हो जाएगा और सूची से एक तत्व के ऊपर होगा

आगे जाने के लिए:

जैसा आप उम्मीद कर सकते हैं, यह समाधान काम करता है, लेकिन मुझे यह पसंद नहीं है।
हम अपनी घटनाओं को नियंत्रित नहीं करते हैं और यह बुरा है
इसके अलावा, आपको इसे प्राप्त करने के लिए vm.isHover दायरे तक पहुंच प्राप्त होनी चाहिए और संभवतः संभव नहीं है लेकिन संभव है कि किसी तरह या किसी अन्य तरीके से गंदा हो।
अगर कोई चाहता है तो मैं एक बेला बना सकता हूं

फिर भी, मेरे पास एक और समाधान नहीं है …
यह एक लंबी कहानी है और मैं आपको आलू नहीं दे सकता है, कृपया मुझे मेरे दोस्त को माफ कर दो।
वैसे भी, pointer-events: none भी जीवन pointer-events: none है, इसलिए इसे याद रखें।

यदि आपके पास तत्व से अभिगम है जो घटना mouseout विधि के अंदर संलग्न है, तो आप इसका उपयोग कर सकते contains() यह देखने के लिए कि क्या event.relatedTarget एक बच्चा तत्व है या नहीं

जैसा कि event.relatedTarget तत्व है जिसमें माउस पास हो चुका है, यदि यह एक बच्चा तत्व नहीं है, तो आप तत्व से बाहर रखे हैं

 div.onmouseout = function (event) { if (!div.contains(event.relatedTarget)) { // moused out of div } }