parent dom에서 "stopPropagation"을 사용하는 방법은 무엇입니까?

Question

위의 그림에서 상위 DOM 노드에는 이벤트가 있고 하위 노드도 있습니다.

자식에서 stopPropagation을 사용하여 버블 링을 방지 할 수 있습니다.

하지만 너무 많은 자식이있는 경우 너무 많은 stopPropagation이 발생해야합니다. 부모 노드에서 사용하는 함수가 자식 거품을 멈출 수 있습니까?

Answer 1

이벤트가 특정 종류의 자식 요소를 통과 한 경우 부모 이벤트 핸들러가 수행하는 작업을 피하고 싶은 것 같습니다. 이 경우 부모 이벤트 처리기에서 event.target을 사용하여 이벤트가 일치하는 하위를 통과했는지 여부를 파악할 수 있습니다.

반 의사 코드에서

:

theParentElement.addEventListener("the-event", function(e) { 
    for (var node = e.target; node && node != this; node = node.parentNode) { 
     if (isChildWeWantToFilterOut(node)) { 
      return; 
     } 
    } 

    // parent handler logic that you only want to run when the 
    // event didn't pass through a relevant child 
}, false);