jQuery: nhấp vào chức năng loại trừ trẻ em.

Cố gắng quấn đầu tôi quanh hàm ".not ()" của jQuery và gặp vấn đề. Tôi muốn có div cha là "có thể nhấp" nhưng nếu người dùng nhấp vào phần tử con, tập lệnh sẽ không được gọi.

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

html:

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

Để làm điều này, dừng nhấp chuột vào đứa trẻ bằng cách sử dụng .stopPropagation :

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

Điều này sẽ ngăn các nhấp chuột của trẻ vượt qua mức của chúng để phụ huynh không nhận được nhấp chuột.

.not() được sử dụng một chút khác nhau, nó lọc các thành phần ra khỏi bộ chọn của bạn, ví dụ:

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

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

Để nhấp chuột, vấn đề của bạn là nhấp chuột vào một đứa trẻ bong bóng lên cha mẹ , không phải là bạn đã vô tình gắn một trình xử lý nhấp chuột cho trẻ.

Tôi đang sử dụng đánh dấu sau đây và đã gặp phải vấn đề tương tự:

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

Ở đây tôi đã sử dụng logic sau:

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

Về câu hỏi chính xác, tôi có thể thấy rằng hoạt động như sau:

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

hoặc tất nhiên theo cách khác:

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

Mong rằng sẽ giúp.

Hoặc bạn cũng có thể làm:

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

   // ... //
});

Giải pháp của tôi:

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

Cá nhân tôi sẽ thêm một trình xử lý nhấp chuột vào phần tử con mà không làm gì ngoài việc ngăn chặn sự lan truyền của nhấp chuột. Vì vậy, nó sẽ trông giống như:

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

Đây là một ví dụ. Hình vuông màu xanh lá cây là cha mẹ và hình vuông màu vàng là yếu tố con.

Hy vọng rằng điều này sẽ giúp.

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>