onClickOut (तत्व छोड़ने के बाद क्लिक करें)

Question

समस्या यह थी कि मुझे "onClickOut" -Event की आवश्यकता है।

उदाहरण के लिए: आपके पास कुछ बटन या कभी भी होवरिंग (ऑनसाउस ओवर) पर एक डीआईवी देखने है।

यदि आप तत्व के बाहर क्लिक करते हैं तो इसे छिपाने की जरूरत है, लेकिन यदि आप $ ("body") कहते हैं। पर क्लिक करें, जब आप तत्व में स्वयं क्लिक करते हैं तो यह भी छिपा होगा। :/

अब मैं माउसपोजिशन सुनता हूं और माउसलेव() मैंने अपने तत्व में क्लिक करने पर एक var सेट किया है। अगले चरण में मैं एक जीनरल क्लिक-इवेंट (बॉडी) सुनता हूं लेकिन मैं पूछता हूं कि var सेट किया गया था या नहीं। यदि नहीं, तो यह मेरे तत्व के बाहर एक क्लिक होना है, इसलिए मैं अपना तत्व छुपा सकता हूं।

मुझे आशा है कि आप इसका इस्तेमाल कर सकते हैं:

$("#schnellsuche_box").mouseleave(function() { 
    var inside; 
    $("#schnellsuche_box").click(function() { 
     inside = true; 
    }); 
    $("body").click(function() { 
     if(!inside) { 
      $("#schnellsuche_box").hide(); 
     } 
    }); 
    delete inside; 
}); 

Answer 1

आप करना है कि दस्तावेज़ के स्तर पर एक क्लिक करने के लिए सुन रहा है, और ईवेंट हैंडलर के अंदर आप की जाँच करता है, तो क्लिक किए गए तत्व #schnellsuche_box या closest() का उपयोग कर, तो तरह से #schnellsuche_box अंदर किसी भी तत्व था द्वारा:

$(document).on('click', function(e) { 
    if (! $(e.target).closest('#schnellsuche_box').length) 
     $('#schnellsuche_box').hide(); 
}); 

FIDDLE

Answer 2

आप body क्लिक करें घटना के लिए खलबली मचाने वाले से #schnellsuche_box क्लिक करें घटना को रोकने के लिए की जरूरत है (कि डिफ़ॉल्ट घटना प्रचार है) return false करके:

$("#schnellsuche_box").click(function() { 
    inside = true; 

    return false; 
}); 

Answer 3

इसे आज़माएं:

$("body").click(function(e) { 
    var $target = $(e.target); 
    if (!$target.is('#schnellsuche_box') && 
     !$target.parents('#schnellsuche_box').length) { 
     alert('outside'); 
    } 
}); 

Answer 4

$("#schnellsuche_box").on("click",function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
});