Question

我在<input>下有一个<th>，输入有一个onChange事件，但是当点击输入时，click标记上会发出<th>个事件。如何阻止click事件从DOM树上升到父事件监听器？

const App = () => (
  <div style={styles}>
    <table>
      <th onClick={()=>alert('fire')}>
        name
        <input onChange={e=>{e.preventDefault();alert('change text')}}/>
      </th>
    </table>
  </div>
);

尝试激活输入https://codesandbox.io/s/wq3rj2m00w

Answer 1

如果您只希望th点击处理程序在直接点击时触发，您可以检查目标：

<th onClick={e => {
   if (e.currentTarget === e.target) {
     alert('fire');
   }
}}>

另一个选项是使用stopPropagation调用向输入添加一个单击处理程序：

<input onChange={e=>{e.preventDefault();alert('change text')}} onClick={e => e.stopPropagation()}/>

currentTarget上的MDN详细信息：

在事件遍历DOM时标识事件的当前目标。它始终引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Answer 2

所以当你尝试通过点击它来关注输入时，会在输入时触发onClick事件并传播给父级，

您有两种可能的解决方案：

首先：在事件的输入和stopPropagation上添加onClick事件。

const App = () => (
  <div style={styles}>
    <table>
      <th onClick={()=>alert('fire')}>
        name
        <input onClick={(e) => {e.stopPropagation()}} onChange={e=>{alert('change text')}}/>
      </th>
    </table>
  </div>
);

或

第二次：在采取行动之前检查target事件中的onClick

const App = () => (
  <div style={styles}>
    <table>
      <th onClick={(e)=>{if(e.target.id !== 'input') {alert('fire')}}}>
        name
        <input id="input" onChange={e=>{alert('change text')}}/>
      </th>
    </table>
  </div>
);

反应中的事件冒泡不会停止使用e.preventDefault（）

2 个答案: