एचटीएमएल बॉडी पर सभी क्लिक सुनने के लिए JQuery का उपयोग करें एक विशिष्ट div और उसके बच्चों को छोड़कर

Question

मैं एक jQuery श्रोता का उपयोग करने की कोशिश कर रहा हूं ताकि उपयोगकर्ता एचटीएमएल बॉडी पर क्लिक कर सकें और शरीर पर कहीं भी एक विशिष्ट कार्य कर सकूं उस div के भीतर एक विशिष्ट div और बच्चों को छोड़कर क्लिक किया गया।

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

var initialClick = false; 
$('body').on('click.addPhoneListeners', function(event) { 
    var target = EventUtility.getTarget(event); 
    if(initialClick) { 
     if(target.parentNode.id != clone.id && target.id != '') { 
      finish(); 
     }; 
    } 
    initialClick = true; 
}); 

कौन सा शरीर पर सभी क्लिक के लिए सुनता है और जब तक क्लिक तत्व मैं उपयोगकर्ता के साथ बातचीत करने में सक्षम होना चाहता हूँ के भीतर से आता है, यह बंद कर देता है:

मैं इस श्रोता उपयोग किया गया है। दुर्भाग्यवश यह केवल एक div के साथ काम करता है जिसमें केवल एक स्तर के बच्चे हैं। जैसे ही मैं इस जैसे कई पदानुक्रम हो रही शुरू के रूप में:

<div id="addressContainer"> 
    <div id="address" class="hidden row"> 
     <div class="row"> 
      <div id="address.primary" class="hidden">P</div> 
      <div id="address.type"></div> 
      <div id="address.street"></div> 
      <div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div> 
      <div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div> 
     </div> 
     <div class="row"> 
      <div id="address.city"></div> 
      <div id="address.state"></div> 
      <div id="address.zip"></div> 
     </div> 
     <input type="hidden" id="address.id"></input> 
    </div> 
</div> 

target.parentNode.id मुझे वस्तुओं माता पिता तत्व के रूप में addressContainer आईडी करने का विरोध किया है और इस तरह काम नहीं करता है देता है। नेस्टेड तत्वों के भीतर से शीर्ष स्तर के माता-पिता का उपयोग करें? अन्य तत्व इस कोड का उपयोग करेंगे, इसलिए इसे दोनों स्तरों पर केवल एक स्तर और div के साथ काम करना होगा।

अपडेट: कुछ उत्कृष्ट समाधान मिले, धन्यवाद दोस्तों। हालांकि मेरे पास एक और सवाल है। ऊपर दिए गए मेरे कोड का संदर्भ लें जहां मैंने प्रारंभिक क्लिक बूलियन को गलत पर सेट किया है, फिर इसे सत्य पर सेट करें। मैं ऐसा इसलिए कर रहा हूं क्योंकि अगर मैं नहीं करता, तो जब मैं पॉपअप div जोड़ने के लिए जाता हूं, तो उस पॉपअप को सेट करने के लिए इस्तेमाल किए गए बटन से प्रारंभिक क्लिक श्रोता को फायर करता है और मुझे कुछ भी करने का मौका मिलने से पहले पॉपअप बंद कर देता है। यह समस्या के आसपास मेरा समाधान रहा है, लेकिन क्या यह एकमात्र तरीका है? या मैं सिर्फ श्रोता को थोड़ा गलत स्थापित कर रहा हूं?

Answer 1

मैं आमतौर पर कुछ इस तरह से करते हैं।

Answer 2

if(target.parentNode.id != clone.id) 

साथ

if ($(target).closest("#" + clone.id).length === 0) 

(मैं दूसरे खंड अकेले क्योंकि यह आपके प्रश्न से संबंधित नहीं मालूम था छोड़ दिया है।) की जगह

यह निकटतम पूर्वज खोजने की कोशिश करता clone.id के बराबर आईडी के साथ। यदि कोई नहीं मिला है, तो एक खाली jQuery ऑब्जेक्ट लौटाया जाता है (यानी length === 0 के साथ), जिसे हम परीक्षण करते हैं।

---

संयोग: jQuery event.target को सामान्य है, तो आप सिर्फ इतना है कि बजाय जो कुछ कस्टम कुरूपता EventUtility.getTarget(event) प्रतीक का उपयोग कर सकते हैं। इतने करीब कभी नहीं समारोह आग,

$(document).click(function(e) { 
    // hide popup 
}); 

$('#popup_div').click(function(e) { 
    e.stopPropagation(); 
}); 

इस तरह अपने पॉपअप से प्राप्त क्लिक दस्तावेज़ तक पहुंचने में कभी नहीं: