किसी ऑब्जेक्ट पर क्लिक किए जाने पर माउसलेव को रोकें

Question

यदि मैं एक div को माउसेंटर करना चाहता हूं, तो एक तत्व दिखाएगा, फिर माउसलेव, तत्व गायब हो जाएगा।

मेरे पास माउसेंटर के अंदर एक क्लिक फ़ंक्शन है, इसलिए क्लिक होने पर ड्रॉप डाउन मेनू होता है।

मैं ड्रॉपडाउन मेनू और तत्व को माउसलेव के बावजूद सक्रिय रहने के लिए चाहता हूं। तो मैं एक क्लिक घटना होने पर, इस स्थिति में माउसलेव लागू नहीं होना चाहता हूं। तत्व और ड्रॉपडाउनमेनू गायब होने के लिए उपयोगकर्ता को पृष्ठ पर फिर से या कहीं भी तत्व पर क्लिक करना होगा।

लेकिन मैं माउसलीव फ़ंक्शन को काम करना चाहता हूं ताकि उपयोगकर्ता माउस diventsers div, तत्व दिखाएगा और वे फिर से उस पर क्लिक कर सकते हैं।

मैं वर्तमान में कुछ इस तरह है, लेकिन मैं सिर्फ इतना पता है कि कैसे बनाने के लिए mouseleave के लिए नहीं लागू हो जब क्लिक न

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 
     return false; 
    }); 
}).mouseleave(function(){ 
    $(".element",this).hide(); 
}); 

संपादित करें:

एचटीएमएल

<div class='div'> 
    <div class='element' style='display:none;'> 
     boxed element 
    </div> 
    <div class='dropdown' style='display:none;'> 
     menu 
    </div> 
</div> 

Answer 1

आप आइटम को क्लिक करने के लिए चिह्नित करने के लिए एक कस्टम विशेषता सेट कर सकते हैं। माउसलीव इवेंट हैंडलर तत्व को छिपाने से पहले इस कस्टम विशेषता के मान की जांच कर सकता है।

अर्थात कुछ की तरह:

$(".div").mouseenter(function(){ 
    $(".element",this).show(); 
    $(".element").click(function(){ 
     $(".dropdown").show(); 

     // set custom attribute for marking this one as clicked 
     $(this).attr('clicked', 'yes'); 

     return false; 
    }); 
}).mouseleave(function(){ 

    // check custom attribute before hiding the element 
    if($(this).attr('clicked') != 'yes') { 
     $(".element",this).hide(); 
    } 

}); 

Answer 2

आप कर सकते हैं इसके लिए jQuery की नई चालू/बंद विधियों का उपयोग करें यदि आप 1.7+

का उपयोग कर कुछ ऐसा करते हैं:

$(".div").on('mouseenter', function(){ 
    showElm(); 
    $(".element").click(function(){ 
     $(".div").off('mouseleave', hideElm); 
     $(".dropdown").show(); 
     return false; 
    }); 
}); 

$(".div").on('mouseleave', hideElm); 
$(document).on('click', hideElm); 

function hideElm() { $(".element, .dropdown").hide(); } 
function showElm() { $(".element").show(); } 

फिडल: http://jsfiddle.net/fSjtm/

शायद कुछ tweeking की आवश्यकता होगी, लेकिन यह आपको एक सामान्य विचार दे देंगे।

Answer 3

यह

$("#id").click(function(){ 
    $("#id").off("mouseleave"); 
}); 

Answer 4

उपयोग event.stopPropagation (मेरे लिए चाल किया था);

इस बेहतर है क्योंकि आप तत्व

$(".div").on('mouseenter', function(){ 
 
    showElm(); 
 
    $(".element").click(function(event){ 
 
     $(".div").off('mouseleave', hideElm); 
 
     $(".dropdown").show(); 
 
     event.stopPropagation(); 
 
    }); 
 
}); 
 

 
$(".div").on('mouseleave', hideElm); 
 
$(document).on('click', hideElm); 
 

 
function hideElm(event) { $(".element, .dropdown").hide(); } 
 
function showElm(event) { $(".element").show(); }

.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; } 
 
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='div'>HERE 
 
    <div class='element'> 
 
     boxed element 
 
    </div> 
 
    <div class='dropdown'> 
 
     menu 
 
    </div> 
 
</div>

Answer 5

यह mouseleave घटना आप, कस्टम jQuery क्लिक करें और नहीं एक मूल MouseEvent से शुरू हो रहा का उल्लेख लगता है पर लिंक का उपयोग कर सकते है। इस प्रयास करें:

$(".div").on('mouseenter', function(){ 
    $(".element").on('click', function(){ ... }); 
}); 

$(".div").on('mouseleave', function(event){ 
    if(typeof(e.originalEvent) != 'undefined'){ 
     // only when mouseleave is the original event. 
    } 
});