jQuery: বাচ্চাদের বাদ দিন ফাংশন ক্লিক করুন।

Question

JQuery ".not ()" ফাংশনটির চারপাশে আমার মাথা গুটিয়ে দেওয়ার চেষ্টা করা হচ্ছে এবং কোনও সমস্যা হতে চলেছে। আমি অভিভাবক ডিভটিকে "ক্লিকযোগ্য" হতে চাই তবে কোনও ব্যবহারকারী যদি কোনও শিশু উপাদানটিতে ক্লিক করেন তবে স্ক্রিপ্টটি কল করা হয় না।

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

এইচটিএমএল:

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

Answer 1

এটি করতে ,। স্টপপ্রোপেশন ব্যবহার করে সন্তানের উপর ক্লিক বন্ধ করুন :

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

এটি বাচ্চার ক্লিকগুলিকে তাদের স্তরের উপরের বুবলি থামিয়ে দেবে যাতে পিতামাতারা ক্লিকটি পান না receive

.not() কিছুটা আলাদাভাবে ব্যবহৃত হয়, এটি আপনার নির্বাচক থেকে উপাদানগুলি ফিল্টার করে, উদাহরণস্বরূপ:

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

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

ক্লিক করার জন্য, আপনার সমস্যাটি হ'ল কোনও সন্তানের ক্লিকটি পিতামাতার উপর বুদবুদ হয়ে থাকে , এমন নয় যে আপনি অজান্তেই সন্তানের সাথে একটি ক্লিক হ্যান্ডলার সংযুক্ত করেছেন।

Comments

ধন্যবাদ নিক, আমি মনে করি না যে এটিই আমি খুঁজছিলাম। আমি দুঃখিত যে আমি আমার প্রশ্নের মধ্যে পরিষ্কার ছিল না। আমি পুরো ডিভ.অ্যাম্পলিকে ফেইডআউট করতে চাই, কেবলমাত্র পিতামাতার উপাদানটি ক্লিক করা হয়, যখন শিশু ডিভ ক্লিক করা হয় না। এর কারণ হ'ল আমি চাই যে ব্যবহারকারী অনুচ্ছেদে পাঠ্যে ক্লিক করতে সক্ষম হোন এবং পাঠ্যটি ফেইডআউট না করে। যদি ব্যবহারকারী বাহ্যিক ডিভ (পিতামহক ডিভ) এ ক্লিক করেন তবে সমস্ত কিছু ম্লান হয়ে যাবে।

— শিরোনাম

@ সুপারটাইটেল্ড - স্পষ্টতার জন্য ধন্যবাদ ... উত্তর এটির জন্য আপডেট হয়েছে, একবার চেষ্টা করে দেখুন

— নিক Craver

@ আসফ - এই মামলার e.stopPropagation();পরিবর্তে ব্যবহার করুন return false;।

— নিক ক্র্যাভার

আপনি }).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

আমি মনে করি এটিই আরও ভাল সমাধান। এটি কোনওভাবেই বাচ্চাদের সাথে হস্তক্ষেপ করে না এবং এটি আরও ভাল সঞ্চালন করা উচিত কারণ এটি হাজার হাজার শিশু থাকলে সম্ভাব্যভাবে হাজার হাজার কলব্যাকগুলি নিবন্ধন করে না register

— লুকাসবি

@ l2aelba - আপনার উইকিপিডির .on("click", ...)সাম্প্রতিক সংস্করণগুলিতে ব্যবহার করা উচিত যা .live()ভি 1.7 থেকে অবহেলিত হয়েছে। Api.jquery.com/live

— ক্রিস

হ্যাঁ, @ ক্রিস আমি 16 নভেম্বর 12 'তে

— l2aelba

দুঃখিত, সম্ভবত আপনার আইডি রেফারেন্স প্রয়োজন হয় নি। আমি এই উত্তরটি পড়ার জন্য কারও পক্ষে মন্তব্যটি মূলত যুক্ত করেছি।

— ক্রিস

এই উত্তর গৃহীত উত্তরের চেয়ে উত্তম কারণ এটি শিশু উপাদানগুলিতে কোনও ক্লিক ইভেন্টগুলিতে বাধা দেয় না

— ক্যামেরনজোনসভেব

Answer 3

অথবা আপনি এটি করতে পারেন:

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

   // ... //
});

Comments

বাচ্চাদের উপাদানগুলির ক্লিক ইভেন্ট এড়ানোর জন্য আপনাকে অবশ্যই মিথ্যা প্রত্যাবর্তন করতে হবে। পুনর্বিবেচনাটি ভুল ছিল

— ডানি 24

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>