jQuery पेज पर 1 div को छोड़कर कहीं भी क्लिक करें


87

जब मैं अपने पृष्ठ पर एक div ( id=menu_content) को छोड़कर कहीं भी क्लिक करता हूं, तो मैं एक फ़ंक्शन को कैसे ट्रिगर कर सकता हूं ?

जवाबों:


141

आप दस्तावेज 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

});

3
DIV में वंशज बच्चों के बारे में क्या?
19

2
हम ईवेंट मेनू के स्रोत की जांच करने के लिए निकटतम उपयोग कर सकते हैं, जैसे कि ($ (evtarget) .closest ('# menu_content') लंबाई के साथ किसी भी पूर्वज के पास मेनू है। लंबाई; मेरे अद्यतन उत्तर की जाँच करें।
आदिल

चूंकि closestवर्तमान तत्व के साथ शुरू होता है, यह क्लिक करने menu_contentके साथ-साथ वंश पर क्लिक करने के लिए भी संभालता है । मुझे लगता है कि दूसरी ifआप सभी की जरूरत है।
goodeye

50

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
});

42

इसे इस्तेमाल करे

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

आप बाहर की घटनाओं का भी उपयोग कर सकते हैं


5
यह काम करता है, लेकिन Event.stopPropagation () का उपयोग करके माता-पिता के भीतर मौजूद अन्य JS पर प्रभावों पर दस्तक दे सकता है।
Edd Smith

9

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

अधिक सामान्य तरीके से, हम कुछ इस तरह से कर सकते हैं:

$('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
    }
});

1
मैं सिर्फ यह कहना चाहता था कि यह विधि मेरे लिए ठीक काम करती है, मैंने एक सीएसएस चयनकर्ता के साथ .is () और .closest () का भी उपयोग किया, जिसमें कोई आईडी नहीं थी, लेकिन कुछ वर्ग आपको धन्यवाद देते हैं
22:10

7

मैंने जो किया था यह रहा। मैं यह सुनिश्चित करना चाहता था कि मैं किसी भी बच्चे को अपनी डेट पर जाने के लिए बिना क्लोज किए क्लिक कर सकूं।

$('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();
    }
});

क्लिक किए गए बच्चों और कक्षा सहित अच्छे संस्करण, उठाया गया उत्तर होना चाहिए!
रासुस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.