[javascript] 자식 앵커를 클릭 할 때 부모의 onclick 이벤트가 발생하지 않도록하려면 어떻게해야합니까?

현재 jQuery를 사용하여 div를 클릭 가능하게 만들고이 div에는 앵커도 있습니다. 내가 겪고있는 문제는 앵커를 클릭 할 때 두 클릭 이벤트가 모두 발생한다는 것입니다 (div 및 앵커). 앵커를 클릭 할 때 div의 onclick 이벤트가 발생하지 않도록하려면 어떻게합니까?

깨진 코드는 다음과 같습니다.

자바 스크립트

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

답변

클릭 이벤트가 연결된 DOM에서 이벤트가 버블 링됩니다. 따라서 귀하의 예에서 div에 명시 적으로 클릭 가능한 다른 요소가 없더라도 div의 모든 자식 요소는 DIV의 click 이벤트 핸들러가 그것을 잡을 때까지 click 이벤트를 DOM으로 버블 링합니다.

누가 실제로 이벤트를 시작했는지 확인하는 방법이 두 가지 있습니다. jQuery는 이벤트와 함께 eventargs 객체를 전달합니다.

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

클릭 이벤트 핸들러를 링크에 연결 하여 자체 핸들러가 실행 된 후 이벤트 버블 링 을 중지 하도록 지시 할 수 있습니다 .

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

답변

stopPropagation 메소드를 사용 하십시오 (예 참조).

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

jQuery Docs가 말했듯이 :

stopPropagation 메소드는 이벤트가 DOM 트리를 버블 링하는 것을 방지하여 상위 핸들러가 이벤트를 통지하지 못하게합니다.

다른 청취자가이 이벤트를 처리하는 것을 막을 수는 없다는 것을 명심하십시오 (예를 들어, 버튼에 대해 하나 이상의 클릭 핸들러), 원하는 효과가 아닌 경우 stopImmediatePropagation대신 사용해야 합니다.

답변

여기에 비 jQuery 코드를 찾는 모든 사람들을위한 내 솔루션 (순수한 자바 스크립트)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e;
    if(this === e.target) {
        // put your code here
    }
});

부모의 자녀를 클릭하면 코드가 실행되지 않습니다

답변

당신은 또한 이것을 시도 할 수 있습니다

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   }
   else
   {
      //do something with <a> tag
   }
});

답변

어떤 경우에도 내부 요소와 상호 작용하지 않으려는 경우 CSS 솔루션이 유용 할 수 있습니다.

내부 요소를로 설정하십시오. pointer-events: none

귀하의 경우 :

.clickable > a {
    pointer-events: none;
}

또는 모든 내부 요소를 일반적으로 타겟팅하기 위해 :

.clickable * {
    pointer-events: none;
}

이 쉬운 해킹은 ReactJS로 개발하는 동안 많은 시간을 절약했습니다.

브라우저 지원은 여기에서 찾을 수 있습니다 : http://caniuse.com/#feat=pointer-events

답변

클릭 가능한 div에 여러 요소가있는 경우 다음을 수행하십시오.

$('#clickable *').click(function(e){ e.stopPropagation(); });

답변

사용 return false;하거나 e.stopPropogation();추가 코드를 실행할 수 없습니다. 이 시점에서 흐름이 중지됩니다.