jQuery: 자식 제외 함수를 클릭합니다.

jQuery: 자식 제외 함수를 클릭합니다.

jQuery "not()" 함수에 내 머리를 감으려고 시도하다가 문제에 부딪혔습니다.부모 div를 "클릭 가능"으로 하고 싶지만 사용자가 자식 요소를 클릭하면 스크립트가 호출되지 않습니다.

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

html:

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

이 작업을 수행하려면 .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

클릭의 경우 문제는 클릭 핸들러를 실수로 자녀에게 연결한 것이 아니라 자녀를 클릭하면 부모에게 거품이 발생한다는 것입니다.

다음 마크업을 사용하고 있는데 같은 문제가 발생했습니다.

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

또는 다음을 수행할 수 있습니다.

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

   // ... //
});

내 솔루션:

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

저는 개인적으로 클릭 처리기를 하위 요소에 추가하여 클릭의 전파를 중지할 뿐입니다.따라서 다음과 같이 표시됩니다.

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

여기 예가 있습니다.녹색 사각형은 상위 요소이고 노란색 사각형은 하위 요소입니다.

이것이 도움이 되기를 바랍니다.

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>

언급URL : https://stackoverflow.com/questions/2457246/jquery-click-function-exclude-children