반응 - 부모에 대한 이벤트 트리거를 자식에서 방지

반응 - 부모에 대한 이벤트 트리거를 자식에서 방지

이 시나리오에서는 부모 요소를 클릭하면 다른 색상의 자식 요소가 플립됩니다.안타깝게도 사용자가 색상 중 하나를 클릭하면 부모에 대한 '클릭' 이벤트도 트리거됩니다.

자녀가 클릭될 때 부모에 대한 이벤트 트리거를 중지하려면 어떻게 해야 합니까?

생각할 수 있는 해결책:

1. CSS?
   추가pointer-events : none클래스를 부모에게 전달합니다.단, 이는 부모로부터 보호대상자를 삭제해야 한다는 것을 의미합니다.pointer-events나중에 수업해요.

2. 참조를 사용하시겠습니까?
   녹음하다ref부모의React요소를 클릭하고 아이를 클릭하면event.target심판을 상대로?나는 이것이 싫다 왜냐하면 나는 글로벌이 싫기 때문이다.ref.

생각이나 더 나은 해결책을 주시면 감사하겠습니다.문제는 다음과 같습니다.자녀가 클릭될 때 부모에 대한 이벤트 트리거를 중지하려면 어떻게 해야 합니까?

사용할 수 있습니다.

stopPropagation- 버블링 단계에서 전류 이벤트가 더 이상 전파되지 않도록 합니다.

var App = React.createClass({
  handleParentClick: function (e) { 
    console.log('parent');
  },

  handleChildClick: function (e) {
    e.stopPropagation();
    console.log('child');
  },

  render: function() {
    return <div>
      <p onClick={this.handleParentClick}>
        <span onClick={this.handleChildClick}>Click</span>
      </p>
    </div>;
  }
});

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

리액트에서도 같은 문제가 발생하여 아래의 솔루션을 사용하여 해결했습니다.

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

또 다른 해결책은 부모 콜백의 이벤트에 다음을 부가하는 것입니다.

if(event.target == event.currentTarget){
  event.stopPropagation()
  ....
}

이렇게 하면 연결된 DOM 노드에서 발생한 이벤트를 대행 수신할 수 있으며 관련 없는 이벤트는 다음 노드로 릴레이됩니다.

소품에서 기능을 호출하고 싶었지만 동시에 자녀에서 부모로의 이벤트 전파를 중지하고 싶었고, 이렇게 처리되었습니다.

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;

저는 이 솔루션이 가장 깨끗하다고 생각합니다.감사합니다 @JohnFash!

onClick={(event) => event.currentTarget == event.target && doSomething(event)}

자세한 설명은 마우스가 부모 요소를 입력하면 currentTarget이 설정(이벤트)되고, 그 후 자녀 요소를 입력하면 대상이 변경됩니다.체크하지 않으면 마우스의 탈퇴 이벤트가 트리거되지 않았기 때문에 부모의 onClick이 트리거됩니다.

오래된 질문이지만, 그 후 스스로 해결했습니다.이렇게 'child' div에서 이벤트를 중지하고 나서, 아이들을 통해서 전해졌습니다.그러면 클릭 이벤트를 정지할 수 있는 장소에 배치할 수 있습니다.

<div onClick={doThisClickEvent}> 
 <div onClick={(e) => e.stopPropagation()}>
  <div>
   <p>This now wont trigger click event</p>
  </div>
 </div>
</div>

저는 Material-UI Data Grid에 이러한 문제가 있었고, 이를 다음과 같이 해결했습니다.

event.defaultMuiPrevented = true;

예:

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
/>

언급URL : https://stackoverflow.com/questions/37568550/react-prevent-event-trigger-on-parent-from-child