버블 링의 반전 : DOM 자식에 대한 클릭 금지

Question

버블 링 및 event.stopPropagation()의 작동 방식을 이해하지만 DOM 노드의 모든 하위 노드에서 클릭 핸들러를 피하는 방법을 찾고 있습니다.

<div onclick="console.log('LOG ME')"> 
    <div onclick="console.log('DO NOT LOG ME')">Click me</div> 
</div> 

로깅하려면 '로그인'을 누르고 싶지 만 '로깅하지 마십시오'는 로깅하지 마십시오.

pointer-events: none을 사용하여 CSS 방식을 찾았지만 잘 작동합니다. 그러나 모든 my : hover, : 포커스 CSS 스타일은 하위 div에 있습니다.

아이디어가 있으십니까?

편집 : 일부 컨텍스트 나는 React를 사용하고있다. 바깥 쪽 div는 HOC이고 안쪽 div는 보이는 구성 요소입니다. HOC가 하위 구성 요소의 모든 클릭을 포착하고 자녀에 대한 클릭 전파를 중지하도록합니다. 반작용으로 할 것 :

당신이 이벤트의 끝에서 Capture을 사용하여 다음 반응 사용하는 경우 ChildComponent이 (업데이트 질문) 클릭 할 수있는 구성 요소

Answer 1

업데이트

이고 그래서 핸들러는 캡처 단계에서 트리거됩니다. (https://reactjs.org/docs/events.html#supported-events 참조)

그래서 뭔가 당신은 이벤트 전파를 중지해야합니다, 당신은 이벤트의 캡처 단계가 아닌 버블을 사용할 필요가

---

const HOC = ChildComponent => class extends Component { 
    handleClick = event => { 
    /* Do what with event? */ 
    event.stopPropagation(); 
    /*the rest of the code you want for handling the click*/ 
    } 

    render() { 
    return <div onClickCapture={this.handleClick}> 
     <ChildComponent /> 
    </div>; 
    } 
} 

있다.

그래서 대신 onclick가 proper way to attach event handlers을 사용하고 사용하면 컨테이너가 3 매개 변수 (useCapture 매개 변수)로 true을 사용할 수 원하는 외부 하나

document.querySelector('.outer').addEventListener('click', function(e){ 
 
    e.stopPropagation(); 
 
    console.log('LOG ME') 
 
}, true); 
 

 
document.querySelector('.inner').addEventListener('click', function(e){ 
 
    console.log('DO NOT LOG ME') 
 
}, false);

<div class="outer"> 
 
    <div class="inner">Click me</div> 
 
</div>

Answer 2

이벤트의 캡처 단계를 사용하여 부모에서 클릭으로 연결하고 자식에 대한 전파를 중지 할 수 있습니다.

modern standards for event registration 및 not use inline HTML event attributes도 따라야합니다.

// Normally, the following would set up event handler that bubbles up through all div elements 
 
// but, you will see that it only fires once, for the parent element... 
 
document.querySelector("div").addEventListener("click", function(evt){ 
 
    
 
    console.log(this); 
 
    evt.stopPropagation(); // Don't allow the event 
 
    
 
    }, true); // Adding the 3rd argument of true causes the event handler to be registered during the capture phase

<div class="parent"> 
 
    <div class="child">Click me</div> 
 
</div>

Answer 3

이 또는 상황에 적용되지 않을 수도 있지만

를 호출되지 않습니다 당신이 중첩 된 onclick 속성과 이벤트 핸들러를 제거 할 수 있습니다 중첩 된 인라인 onclick의 예를 제공

[].slice.call(document.querySelectorAll('[onclick] [onclick]')).forEach(function(el) { 
 
    el.removeAttribute('onclick') 
 
})

<div onclick="console.log('LOG ME')"> 
 
    <div onclick="console.log('DO NOT LOG ME')">Click me</div> 
 
</div>