बाल तत्वों द्वारा ट्रिगर माउसआउट घटनाओं को कैसे अक्षम करें?

Question

मुझे समस्या को विवरण में बताएं:

मैं एक तत्व पर मँडरा जब एक निरपेक्ष तैनात दिखाना चाहते हैं। यह jQuery के साथ वास्तव में सरल है और ठीक काम करता है। लेकिन जब माउस बाल तत्वों में से एक पर चला जाता है, तो यह युक्त div के माउसआउट इवेंट को ट्रिगर करता है। जब मैं बाल तत्व को मँडराता हूँ तो मैं उस तत्व की माउसआउट घटना को ट्रिगर करने से जावास्क्रिप्ट को कैसे रखता हूँ।

JQuery के साथ ऐसा करने का सबसे अच्छा और छोटा तरीका क्या है?

यहाँ एक स्पष्ट उदाहरण दिया गया है कि मेरा क्या अर्थ है:

एचटीएमएल:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

जावास्क्रिप्ट / jQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

Comments

इस सवाल के jQuery के संस्करण के बिना

— Zach Saucier

Answer 1

सवाल थोड़ा पुराना है, लेकिन मैं दूसरे दिन इसमें भाग गया।

JQuery के हाल के संस्करणों के साथ ऐसा करने का सबसे आसान तरीका उपयोग करने के लिए है mouseenterऔर mouseleaveके बजाय घटनाओं mouseoverऔर mouseout।

आप व्यवहार को जल्दी से परख सकते हैं:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Comments

मेरी गैर- jquery जावास्क्रिप्ट संबंधित समस्या में मदद की। मैं अपने इवेंट श्रोताओं के साथ माउसलेव के बजाय माउसएटर / माउसआउट का उपयोग कर रहा था!

— जो ई।

खोज के लिए, इन माउस घटना व्यवहार के बराबर हैं ROLL_OVERऔर ROLL_OUTAS3 में।

— जेफ वार्ड

मुझे कुछ सिरदर्द से बचाया। यह अजीब है कि बाल तत्वों पर मंडराना माता-पिता की mouseoutघटना को कैसे ट्रिगर करता है , जब वास्तव में इसका मूल तत्व अभी भी अंदर है।

— javiniar.leonard

Answer 2

सादगी की खातिर, मैं अभी html को थोड़ा सा पुनर्गठित करूंगा कि नए प्रदर्शित सामग्री को उस तत्व के अंदर रखा जाए जो माउसओवर ईवेंट के लिए बाध्य है:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

फिर, आप ऐसा कुछ कर सकते हैं:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

---

नोट: मैं इनलाइन सीएसएस की सिफारिश नहीं करता, लेकिन यह उदाहरण को पचाने में आसान बनाने के लिए किया गया था।

Comments

यह वास्तव में एक बहुत ही सरल और साफ समाधान है। मुझे याद दिलाने के लिये धन्यवाद। लेकिन मेरी विशिष्ट स्थिति में, जो सवाल में बिल्कुल नहीं है, यह एक विकल्प है। हालांकि धन्यवाद!

— सैंडर वर्सल्यूज

एसओ के यहाँ दूसरों द्वारा बताए गए विभिन्न तरीकों की कोशिश करने के बाद, मैं आपके तरीके पर वापस आया और इसे मेरे मामले में काम किया। वाह! :-)

— सैंडर वर्सल्यूज

Answer 3

हां, दोस्तों, .mouseleaveइसके बजाय का उपयोग करें .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

या यहां तक ​​कि इसके साथ संयोजन में उपयोग करें live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

Answer 4

आप जावास्क्रिप्ट के ईवेंट बबलिंग के jQuery समकक्ष के लिए देख रहे हैं।

इसकी जांच करें:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

मूल रूप से आपको बच्चों को डोम नोड्स में घटना को पकड़ने की आवश्यकता है, और वहां डोम पेड़ को उनके प्रसार को रोकते हैं। एक और तरीका है, हालांकि वास्तव में सुझाव नहीं दिया गया है (क्योंकि यह आपके पृष्ठ पर मौजूदा घटनाओं के साथ गंभीर रूप से गड़बड़ कर सकता है), पृष्ठ पर एक विशिष्ट तत्व पर इवेंट कैप्चर सेट करना है, और यह सभी घटनाओं को प्राप्त करेगा। यह डीएनडी व्यवहार और इस तरह के लिए उपयोगी है, लेकिन निश्चित रूप से आपके मामले के लिए नहीं।

Comments

यह काम करता है, यह पता होना चाहिए कि आप इसे काम क्यों नहीं कर पाए .. बस एक जानकारी, डॉक्स के लिए एक लिंक बदल गया है, नया लिंक docs.jquery.com/Events/jQuery.Event#event.stopPropagation है। 28.29

— झप्पन

Answer 5

मैं बस जाँच कर रहा हूँ कि माउस-निर्देशांक माउसआउट-ईवेंट में तत्व के बाहर है या नहीं।

यह काम करता है लेकिन यह इतनी सरल चीज़ के लिए कोड का एक बहुत कुछ है :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

पठनीयता के लिए कोड में कटौती, बॉक्स से बाहर काम नहीं करेगा।

Answer 6

मैं रायन से सहमत हूं।

आपकी समस्या यह है कि "अगला" div A. का "बच्चा" नहीं है। HTML या jQuery के लिए यह जानने का कोई तरीका नहीं है कि आपका "a" तत्व DOM में बाल div से संबंधित है। उन्हें लपेटने और आवरण पर एक हॉवर लगाने का मतलब है कि वे जुड़े हुए हैं।

कृपया ध्यान दें कि उसका कोड सर्वोत्तम प्रथाओं के अनुरूप नहीं है, हालाँकि। तत्वों पर छिपी शैली इनलाइन सेट न करें; यदि उपयोगकर्ता के पास CSS है, लेकिन जावास्क्रिप्ट नहीं है, तो तत्व छिप जाएगा और दिखाया नहीं जा सकेगा। बेहतर अभ्यास है कि घोषणा को डॉक्यूमेंट में पहले से ही डाल दिया जाए।

Comments

मैं पूरी तरह से दस्तावेज़ को पहले से ही घटना में छिपाने के साथ सहमत हूं। इनलाइन सीएसएस केवल एक आसान तरीके से पूर्ण कार्य उदाहरण को व्यक्त करने के लिए था। मैं स्पष्ट करने के लिए अपनी प्रतिक्रिया संपादित करूंगा।

— रयान मैक्ग्रे

Answer 7

मैंने pointer-events: none;अपने बाल तत्वों सीएसएस में जोड़कर इस समस्या को हल किया

Comments

यह वास्तव में बहुत मदद करता है जब कुछ विरासत कोड को ठीक करने के लिए माउसओवर और मूसलीव्यू घटनाओं के साथ अपने स्वयं के निर्माण का निर्माण होता है

— CM

Answer 8

जिस तरह से मैंने आमतौर पर देखा है कि यह होवरे तत्व से माउस को स्थानांतरित करने के बीच लगभग 1/2 सेकंड की देरी है। माउस को होवर किए गए तत्व में ले जाते समय, आप कुछ वैरिएबल सेट करना चाहेंगे, जो संकेत देता है कि आप एलिमेंट ओवर हो रहे हैं, और फिर मूल रूप से होवर किए गए हिस्से को छिपाने से रोकें यदि यह वेरिएबल सेट है। जब आप माउस को हटाते हैं, तो आपको इसे गायब करने के लिए hovered तत्व से एक समान छिपाने का कार्य OnMouseOut जोड़ना होगा। क्षमा करें मैं आपको कोई कोड, या कुछ और ठोस नहीं दे सकता, लेकिन मुझे आशा है कि यह आपको सही दिशा में इंगित करेगा।

Comments

हाँ आईडीडी मैं अभी उस तरह एक समाधान लागू किया है। यह वास्तव में एक आम समस्या है। मैं वास्तव में उत्सुक हूं कि अन्य समाधान क्या हैं ... उत्तर के लिए धन्यवाद!

— सैंडर वर्सल्यूज

Answer 9

यह एक पुराना प्रश्न है, लेकिन यह कभी अप्रचलित नहीं होता है। सही उत्तर बाइटब्राइट द्वारा दिया गया होना चाहिए ।

मैं केवल माउसओवर / माउसआउट और माउसएंटर / मूसलीव के बीच के अंतर को इंगित करना चाहूंगा। आप एक महान और उपयोगी व्याख्या पढ़ सकते हैं यहाँ (एक काम डेमो के लिए पृष्ठ के बिल्कुल नीचे करने के लिए जाना)। जब आप उपयोग करते हैं mouseout, तो घटना रुक जाती है जब माउस किसी अन्य तत्व में प्रवेश करता है, भले ही वह एक बाल तत्व हो। दूसरी तरफ, जब आप उपयोग करते हैं mouseleave, तो घटना तब ट्रिगर नहीं होती है जब माउस एक बाल तत्व की निगरानी करता है, और यह वह व्यवहार है जिसे ओपी प्राप्त करना चाहता है।