자녀가 아닌 부모 DIV에서만 클릭 이벤트를 발생시키는 방법은 무엇입니까?

클래스가있는 DIV가 foobar있고 해당 DIV 내부에 클래스 가없는 몇 가지 DIV가 있지만 foobar클래스를 상속한다고 가정합니다 .

$('.foobar').on('click', function() { /*...do stuff...*/ });

DIV의 어딘가를 클릭 할 때만 실행되고 자식 DIV는 실행하지 않기를 원합니다.

가와 (과 e.target) 같은 요소 인 this경우 자손을 클릭하지 않은 것입니다.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

최신 브라우저 만 타겟팅하지 않아도 작동하는 다른 방법이 있습니다. 그냥 CSS를 추가하십시오

pointer-events: none;

클릭을 캡처하려는 div의 모든 하위 사용자에게 지원 테이블은 다음과 같습니다

http://caniuse.com/#feat=pointer-events

버블 링을 유리하게 사용할 수 있습니다.

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

나는 받아 들일만한 대답을 얻지 못했지만 적어도 바닐라 JS에서는 트릭을하는 것처럼 보입니다.

if(e.target !== e.currentTarget) return;

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

이렇게하면 click요소의 모든 자식 요소 에서 이벤트 전파 (버블 링)가 중지되어 .foobar이벤트가.foobar 요소에 이벤트 핸들러를 시작 .

데모는 다음과 같습니다. http://jsfiddle.net/bQQJP/

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

나는 같은 문제가 있었고이 해결책을 찾았다 (다른 답변을 바탕으로)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

기본적으로 대상이 div 인 경우 코드를 실행하고 그렇지 않으면 아무것도하지 않습니다 (숨기지 마십시오)

내 경우는 비슷하지만, 당신이 거의없는 경우입니다 foobar 한 번의 클릭 당 하나만 닫으려는 경우입니다.

부모 사례 찾기

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

아동 사례 찾기

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

event.currentTarget을 사용할 수 있습니다. 이벤트를받은 사람 만 클릭 이벤트를 수행합니다.

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

pointer-events: none;최신 브라우저를 사용할 수없고 타겟팅 하는 경우 다음 composedPath과 같이 객체를 직접 클릭 하는 것을 감지 할 수 있습니다 .

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

구성된 경로에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath를 참조 하십시오.