jQuery: बच्चों को छोड़कर समारोह पर क्लिक करें।

Question

JQuery "(.not)" फ़ंक्शन के चारों ओर मेरे सिर को लपेटने की कोशिश कर रहा है, और एक समस्या में चल रहा है। मैं चाहता हूं कि माता-पिता को "क्लिक करने योग्य" होना चाहिए, लेकिन यदि कोई उपयोगकर्ता किसी बच्चे के तत्व पर क्लिक करता है, तो स्क्रिप्ट को नहीं बुलाया जाता है।

$(this).not(children()).click(function(){
   $(".example").fadeOut("fast");
});

HTML:

<div class="example">
   <div>
      <p>This content is not affected by clicks.</p>
   </div>
</div>

Answer 1

ऐसा करने के लिए, .stopPropagation का उपयोग करते हुए बच्चे पर क्लिक बंद करें :

$(".example").click(function(){
  $(this).fadeOut("fast");
}).children().click(function(e) {
  return false;
});

यह बच्चे के क्लिकों को उनके स्तर से पिछले स्तर पर बुदबुदाती से रोक देगा ताकि अभिभावक को क्लिक प्राप्त न हो।

.not() थोड़ा अलग तरीके से उपयोग किया जाता है, यह आपके चयनकर्ता के तत्वों को फ़िल्टर करता है, उदाहरण के लिए:

<div class="bob" id="myID"></div>
<div class="bob"></div>

$(".bob").not("#myID"); //removes the element with myID

क्लिक करने के लिए, आपकी समस्या यह है कि बच्चे पर क्लिक करने पर माता-पिता तक को जलन होती है , न कि यह कि आपने अनजाने में बच्चे को एक क्लिक हैंडलर संलग्न किया है।

Comments

धन्यवाद निक, मुझे नहीं लगता कि यह वही है जिसकी मुझे तलाश थी। मुझे खेद है कि मैं अपने प्रश्न में स्पष्ट नहीं था। मैं संपूर्ण div.example को fadeOut पर रखना चाहता हूं, केवल तभी जब मूल तत्व पर क्लिक किया जाता है, तब नहीं जब बाल div पर क्लिक किया जाता है। इसका कारण यह है कि मैं चाहूंगा कि उपयोगकर्ता पैराग्राफ पाठ पर क्लिक कर सके और पाठ फीका न हो। यदि उपयोगकर्ता बाहरी div (पैरेंट डिव) पर क्लिक करता है, तो सब कुछ फीका हो जाएगा।

— सुपर यूटाइटल

@superUntitled - स्पष्टीकरण के लिए धन्यवाद ... उत्तर ऐसा करने के लिए अद्यतन किया गया है, इसे आज़माएं।

— निक Craver

@ एसाफ - उस मामले के e.stopPropagation();बजाय उपयोग करें return false;।

— निक Craver

आप }).find('.classes-to-ignore').click(function(e) {विशिष्ट बाल तत्वों को लेने के लिए भी उपयोग कर सकते हैं

— पॉल मैसन

मुझे समझ नहीं आता कि आप उसे इस्तेमाल करने के लिए क्यों कहते हैं e.stopPropagation()और फिर return falseइसके बजाय उपयोग करें । return falseके बराबर है e.preventDefault(); e.stopPropagation()तो यह अप्रत्याशित दुष्प्रभाव हो सकता है।

— स्टीन शूत्त

Answer 2

मैं निम्नलिखित मार्कअप का उपयोग कर रहा हूं और उसी समस्या को घेर लिया है:

<ul class="nav">
    <li><a href="abc.html">abc</a></li>
    <li><a href="def.html">def</a></li>
</ul>

यहाँ मैंने निम्नलिखित तर्क का उपयोग किया है:

$(".nav > li").click(function(e){
    if(e.target != this) return; // only continue if the target itself has been clicked
    // this section only processes if the .nav > li itself is clicked.
    alert("you clicked .nav > li, but not it's children");
});

सटीक प्रश्न के संदर्भ में, मैं देख सकता हूं कि निम्नानुसार काम कर रहा है:

$(".example").click(function(e){
   if(e.target != this) return; // only continue if the target itself has been clicked
   $(".example").fadeOut("fast");
});

या निश्चित रूप से चारों ओर का रास्ता:

$(".example").click(function(e){
   if(e.target == this){ // only if the target itself has been clicked
       $(".example").fadeOut("fast");
   }
});

उम्मीद है की वो मदद करदे।

Comments

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

— लुकासब

@ l2aelba - आपको v1.7 के बाद से हटाए गए .on("click", ...)jQuery के हाल के संस्करणों में उपयोग किया जाना चाहिए .live()। देखें api.jquery.com/live

— क्रिस

हां, @ क्रिस ने 16 नवंबर को 10:12 पर पोस्ट किया

— l2aelba

क्षमा करें, शायद आपको अपनी आईडी का संदर्भ देने की आवश्यकता नहीं है। मैंने इस उत्तर को पढ़ने वाले किसी अन्य व्यक्ति के लिए टिप्पणी को बड़े पैमाने पर जोड़ा।

— क्रिस

यह उत्तर स्वीकार किए गए उत्तर से बेहतर है क्योंकि यह बाल तत्वों पर किसी भी क्लिक की घटनाओं को बाधित नहीं करता है

— कैमरोनजोवेब

Answer 3

या आप भी कर सकते हैं:

$('.example').on('click', function(e) { 
   if( e.target != this ) 
       return false;

   // ... //
});

Comments

बच्चों के तत्वों में क्लिक ईवेंट से बचने के लिए, आपको गलत रिटर्न करना होगा। संशोधन गलत था

— dani24

Answer 4

मेरा समाधान:

jQuery('.foo').on('click',function(event){
    if ( !jQuery(event.target).is('.foo *') ) {
        // code goes here
    } 
});

Comments

आपके ऊपर समाधान के समान।

— user460114

Answer 5

मैं व्यक्तिगत रूप से उस चाइल्ड एलिमेंट में एक क्लिक हैंडलर जोड़ दूंगा जिसने क्लिक के प्रचार को बंद कर दिया था। तो यह कुछ इस तरह दिखेगा:

$('.example > div').click(function (e) {
    e.stopPropagation();
});

Comments

stopPropagationअन्य उत्तरों की तरह झूठ और वापसी के बीच अंतर क्या है?

— क्रैशलॉट

मेरा मानना ​​है कि इस मामले में वे एक ही तरह से कार्य करेंगे, लेकिन मुझे लगता है कि रोक प्रसार का उद्देश्य स्पष्ट है जो किया जा रहा है और यह समझने का एक बेहतर मौका छोड़ देता है कि यह बाद में क्यों किया जा रहा है। लेकिन यह बहस का मुद्दा है।

— नूह

स्पष्टीकरण के लिए धन्यवाद। ऐसा लगता है stopPropagationकि यह क्लीनर हो सकता है क्योंकि यह बच्चे के तत्वों पर होने वाली घटनाओं को रोक नहीं पाएगा, जो इसके साथ हो सकता है return false।

— क्रशालोट

Answer 6

यहाँ एक उदाहरण है। हरा वर्ग माता-पिता है और पीला वर्ग बाल तत्व है।

आशा है कि यह मदद करता है।

var childElementClicked;

$("#parentElement").click(function(){

		$("#childElement").click(function(){
		   childElementClicked = true;
		});

		if( childElementClicked != true ) {

			// It is clicked on parent but not on child.
      // Now do some action that you want.
      alert('Clicked on parent');
			
		}else{
      alert('Clicked on child');
    }
    
    childElementClicked = false;
	
});

#parentElement{
width:200px;
height:200px;
background-color:green;
position:relative;
}

#childElement{
margin-top:50px;
margin-left:50px;
width:100px;
height:100px;
background-color:yellow;
position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentElement">
  <div id="childElement">
  </div>
</div>