मैं jQuery में बाल तत्वों पर माउस ईवेंट को अनदेखा कैसे करूं?

Question

मेरे पास ली तत्वों से जुड़ी माउसओवर और माउसआउट घटनाओं के साथ एक अनियमित सूची है। प्रत्येक में एक लिंक होता है और ली में थोड़ा सा पैडिंग होता है। जब मैं लीओ को माउसवर करता हूं तो माउसओवर इवेंट निकाल दिया जाता है, लेकिन जब मैं माउस 0out में में लिंक करता हूं और माउसओवर ईवेंट दोनों को क्रमशः निकाल दिया जाता है। ऐसा लगता है कि बच्चे के तत्व अपने मूल तत्व माउस घटनाओं को फायर कर रहे हैं ... मैं इसे रोकने के बारे में कैसे जा सकता हूं? मैं चाहता हूं कि लिंक पर मेल खाने पर माउस को हमेशा घुमाएं, हर बार जब मैं एक लिंक पर माउस को एनिमेशंस सक्रिय नहीं करता हूं। यह मेरा कोड है;

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul> 

Answer 1

ऐसा लगता है कि मुझे अपने स्वयं के प्रश्न का उत्तर मिला है। किसी भी व्यक्ति के लिए जो एक ही समस्या हो सकती है; इसके बजाय इस कोड को आजमाएं। ऐसा लगता है कि होवर अन्य तत्वों की तरह बाल तत्वों में बुलबुला नहीं करता है।

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
); 

Answer 2

विभिन्न मेनू स्तरों को अलग करने के लिए सीएसएस कक्षाओं का उपयोग करें। फिर आप अपने jQuery चयनकर्ताओं में आसानी से एक वर्ग या दूसरे की खोज कर सकते हैं।

Answer 3

उपयोग "घटना stopPropagation()।" ऊपर की तरफ बुदबुदाती से घटनाओं को रोकने के लिए:

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 

वैकल्पिक रूप से माउसओवर/बाहर के बजाय mouseenter और mouseleave घटनाओं का उपयोग करें। jQuery ब्राउज़र में अपने व्यवहार को सामान्य करता है और इन घटनाओं के पास बुलबुले का लाभ नहीं होता है ...

Answer 4

आप कोशिश कर सकते हैं इस

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
}); 

लाभ घटना प्रतिनिधिमंडल के एक उपयोग है। शुभकामनाएँ!

Answer 5

मैं जे एस में बराबर व्यवहार जहां AS3 में डाल सकता है के लिए देख रहा था:

object.mouseenabled = false; 

तरह से मैंने पाया कि बहुत अच्छी तरह से काम करता है सीएसएस का उपयोग करें और डाल करने के लिए है:

.element { pointer-events: none; } 

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