Question

我有这种情况，当单击Parent元素时，它会翻转以显示具有不同颜色的子元素。不幸的是，当用户点击其中一种颜色时，点击＆＃39;父母的事件也会被触发。

如何在点击孩子时停止父母的事件触发器？

我想知道可能的解决方案：

1 - CSS ？单击子项时，将pointer-events : none类附加到父项。但是，这意味着父母需要稍后清除pointer-events课程。

2 - 使用参考？记录父ref元素的React＆amp;点击孩子后，将event.target与参考号进行比较？我不喜欢这个，因为我不喜欢全球ref。

思考＆amp;我们非常感谢更好的解决方案。问题是：如何在单击子项时停止父项上的事件触发器？

Answer 1

您可以使用stopPropagation

stopPropagation - 防止进一步传播当前事件冒泡阶段

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 2

我想在道具上调用函数，但同时希望停止事件从子对象传播到父对象，这是它的处理方式

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;

Answer 3

另一种解决方案是将以下内容附加到父项上的事件回调：

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

通过这种方式，您可以拦截源自附加DOM节点的事件，并将不相关的事件中继到下一个节点。

Answer 4

我在 React 中遇到了同样的问题并使用以下解决方案解决了它：

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

Answer 5

我在 Material-UI DataGrid 上遇到了这个问题，并使用这个解决了它：

event.defaultMuiPrevented = true;

例如：

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

React - 防止来自孩子的父亲的事件触发器

5 个答案: