जब मैं अपने पृष्ठ पर एक div ( id=menu_content
) को छोड़कर कहीं भी क्लिक करता हूं, तो मैं एक फ़ंक्शन को कैसे ट्रिगर कर सकता हूं ?
जब मैं अपने पृष्ठ पर एक div ( id=menu_content
) को छोड़कर कहीं भी क्लिक करता हूं, तो मैं एक फ़ंक्शन को कैसे ट्रिगर कर सकता हूं ?
जवाबों:
आप दस्तावेज click
पर आवेदन कर सकते हैं body
और click
यदि click
आईडी के साथ ईवेंट द्वारा जेनरेट किया गया है तो प्रोसेसिंग रद्द कर सकते हैं menu_content
। यह ईवेंट को सिंगल एलिमेंट के click
साथ बाइंड कर देगा और हर एलिमेंट के साथ बाइंडिंग सेव कर सकता है।menu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
closest
वर्तमान तत्व के साथ शुरू होता है, यह क्लिक करने menu_content
के साथ-साथ वंश पर क्लिक करने के लिए भी संभालता है । मुझे लगता है कि दूसरी if
आप सभी की जरूरत है।
JQuery इवेंट लक्ष्य के लिए दस्तावेज़ देखें । ईवेंट ऑब्जेक्ट की लक्ष्य संपत्ति का उपयोग करके, आप यह पता लगा सकते हैं कि #menu_content
तत्व के भीतर क्लिक की उत्पत्ति कहां हुई है और यदि हां, तो क्लिक हैंडलर को जल्दी समाप्त करें। आपको उन .closest()
मामलों को संभालने के लिए उपयोग करना होगा जहां क्लिक की उत्पत्ति वंशज में हुई है #menu_content
।
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
इसे इस्तेमाल करे
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
आप बाहर की घटनाओं का भी उपयोग कर सकते हैं
मुझे पता है कि इस सवाल का जवाब दिया गया है, और सभी जवाब अच्छे हैं। लेकिन मैं इस प्रश्न के लिए अपने दो सेंट जोड़ना चाहता था, जिनके पास समान (लेकिन बिल्कुल समान नहीं) समस्या है।
अधिक सामान्य तरीके से, हम कुछ इस तरह से कर सकते हैं:
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
इस तरह से हम केवल आईडी के साथ तत्व को छोड़कर किसी भी घटना से निकाल नहीं सकते हैं menu_content
छोड़कर किसी भी चीज से को भी हटा सकते हैं, जिन्हें किसी भी तत्व को छोड़कर हम CSS चयनकर्ताओं का उपयोग करके चुन सकते हैं।
उदाहरण के लिए निम्नलिखित कोड स्निपेट में, मुझे उन सभी <li>
तत्वों को छोड़कर किसी भी तत्व से निकाल दिया गया है, जो आईडी के साथ div तत्व के वंशज हैं myNavbar
।
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
मैंने जो किया था यह रहा। मैं यह सुनिश्चित करना चाहता था कि मैं किसी भी बच्चे को अपनी डेट पर जाने के लिए बिना क्लोज किए क्लिक कर सकूं।
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
मेरा वास्तविक कोड:
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});