Question

我有一部分像这样的反应组件：

var headerElement = someBoolean ? <input/> : 'some string';
return <th onClick={this._onHeaderClick}>{headerElement}</th>;

第th个元素的点击处理程序：

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.target);
},

我想要捕获de th元素。当headerElement是'some string'时它工作正常，但是当它是一个input元素时，input元素是event.target字段中引用的元素。实现这一目标的最佳方法是什么？

Answer 1

由于您将处理程序绑定到th，因此您可以使用currentTarget属性。 target属性指的是调度事件的元素。

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.currentTarget);
}

Answer 2

检查

_onHeaderClick(event) {
   event.preventDefault();
   if(event.target === event.currentTarget) {
      // handle
   }
}

Answer 3

喜欢这个吗？

event.target.parentNode

Answer 4

只需使用event.currentTarget

 onClick(e) {
    e.preventDefault();
    console.log(e.currentTarget);
}

Answer 5

由于某种原因，接受的解决方案对我不起作用。

一种可能的解决方法是向您希望从 data-value 事件中排除的子元素添加 onClick 标记：


const eg = () => {

    const clickParent = (event: React.MouseEvent) => {

        event.preventDefault();
        let dataValue = (event.target as HTMLElement).getAttribute('data-value');
        if (dataValue !== 'child') {
            console.log('parent clicked');
        };

    };

    const clickChild = (event: React.MouseEvent) => console.log('child clicked');

    return (

        <div data-value='parent' onClick={clickParent}>

            <div data-value='child' onClick={clickChild}>
            </div>

        </div>

    );


};

Answer 6

 _onHeaderClick(event) {
event.preventDefault();
console.log(event.currentTarget);

}

为我工作

React - 如何仅捕获父级的onClick事件而不是子级

6 个答案: