jQuery ट्रिगर घटना जब तत्व

Question

$(document).click(function(evt) { 
    var target = evt.currentTarget; 
    var inside = $(".menuWraper"); 
    if (target != inside) { 
     alert("bleep"); 
    } 

}); 

मैं यह पता लगाने की कि यह कैसे बनाने के लिए इतना है कि एक उपयोगकर्ता एक निश्चित div (menuWraper) के बाहर क्लिक करता है तो, यह एक ईवेंट को ट्रिगर करने कोशिश कर रहा हूँ .. बाहर क्लिक मुझे एहसास हुआ कि मैं बस कर सकते हैं प्रत्येक क्लिक को किसी ईवेंट को आग लगाना, फिर जांचें कि क्लिक किया गया वर्तमान लक्ष्य $ ("। menuWraper") से चयनित ऑब्जेक्ट के समान है या नहीं। हालांकि, यह काम नहीं करता है, वर्तमान लक्ष्य HTML ऑब्जेक्ट (?) और $ ("मेनूवापर") ऑब्जेक्ट ऑब्जेक्ट है? मैं बहुत असमंजस में हूँ।

Answer 1

बस अपने menuWraper तत्व कॉल event.stopPropagation() पर कॉल करें ताकि इसकी क्लिक घटना document तक बबल न हो।

इसे आजमाएं: वैकल्पिक रूप सेhttp://jsfiddle.net/Py7Mu/

$(document).click(function() { 
    alert('clicked outside'); 
}); 

$(".menuWraper").click(function(event) { 
    alert('clicked inside'); 
    event.stopPropagation(); 
}); 

• http://api.jquery.com/event.stopPropagation/

, आप कर सकते थे return false; बजाय event.stopPropagation();

Answer 2

सबसे आम आवेदन यहाँ दस्तावेज़ क्लिक करने पर बंद हो रहा है, लेकिन नहीं है जब यह उस तत्व के भीतर से आया है, इस के लिए आप को रोकने के लिए उत्साह से भरा हुआ, इस तरह हैं:

$(".menuWrapper").click(function(e) { 
    e.stopPropagation(); //stops click event from reaching document 
}); 
$(document).click(function() { 
    $(".menuWrapper").hide(); //click came from somewhere else 
}); 

सभी यहाँ क्या कर रहे थे रोक रहा है bubbling up (event.stopPrpagation() के माध्यम से) पर क्लिक करें जब यह .menuWrapper तत्व के भीतर से आया था। यदि यह नहीं हुआ था, तो क्लिक कहीं और से आया था, और डिफ़ॉल्ट रूप से यह document तक पहुंच जाएगा, अगर यह वहां जाता है, तो हम उन .menuWrapper तत्वों को छुपाते हैं।

Answer 3

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

$('html').click(function(e) { 
    //if clicked element is not your element and parents aren't your div 
    if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { 
    //do stuff 
    } 
}); 

Answer 4

..

$(document).click(function(evt) { 
    var target = evt.target.className; 
    var inside = $(".menuWraper"); 
    //alert($(target).html()); 
    if ($.trim(target) != '') { 
     if ($("." + target) != inside) { 
      alert("bleep"); 
     } 
    } 
}); 

Answer 5

, मैं उम्मीद है कि मेरा समाधान अन्य लोगों की मदद करता है।

stopPropagation मेरे मामले में समस्याएं उत्पन्न हुईं, क्योंकि मुझे किसी अन्य चीज़ के लिए click ईवेंट की आवश्यकता थी। इसके अलावा, क्लिक किए जाने पर प्रत्येक तत्व को div को बंद नहीं होना चाहिए।

मेरे समाधान:

$(document).click(function(e) { 
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && 
     $(e.target).closest("#div-exception").attr("id") != "div-exception") { 
     alert("Clicked outside!"); 
    } 
}); 

http://jsfiddle.net/NLDu3/

Answer 6

मुझे पता है कि प्रश्न का उत्तर दिया गया है, लेकिन उस पर जाँच करने के लिए आवश्यकता हो सकती है ...

Answer 7

इस कोड को सवाल में मेनू खुल जाएगा, और होगा सेटअप एक क्लिक श्रोता घटना। जब ट्रिगर किया जाता है तो यह लक्ष्य आईडी के माता-पिता के माध्यम से लूप होगा जब तक कि यह मेनू आईडी नहीं पाता। यदि ऐसा नहीं होता है, तो यह मेनू को छुपाएगा क्योंकि उपयोगकर्ता ने मेनू के बाहर क्लिक किया है। मैंने इसका परीक्षण किया है और यह काम करता है।

function tog_alerts(){ 
    if($('#Element').css('display') == 'none'){ 
     $('#Element').show(); 
     setTimeout(function() { 
      document.body.addEventListener('click', Close_Alerts, false); 
     }, 500); 
    } 
} 

function Close_Alerts(e){ 
    var current = e.target; 
    var check = 0; 
    while (current.parentNode){ 
     current = current.parentNode 
     if(current.id == 'Element'){ 
     check = 1; 
     } 
    } 
    if(check == 0){ 
     document.body.removeEventListener('click', Close_Alerts, false); 
     $('#Element').hide();   
    } 
} 

Answer 8

कोशिश यह एक

$(document).click(function(event) { 

     if(event.target.id === 'xxx') 
      return false; 
     else { 
       // do some this here 
     } 

    }); 

Answer 9

$(document).click((e) => { 
    if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { 
    } else { 
    this.onClose(); 
    } 
}); 

Answer 10

function handler(event) { 
var target = $(event.target); 
if (!target.is("div.menuWraper")) { 
    alert("outside"); 
} 
} 
$("#myPage").click(handler);