如何通过evt对象获取元素的角色？或者任何其他可区分的属性

Question

有一个简单的 onClick 事件，我想查看被单击元素的作用。这样做的全部原因是我的 div 上有一个 onClick 事件干扰了它的一个子按钮。如果单击 div 内的按钮或 div.

内的其他位置，我需要单独的行为

以下是我想要实现的目标示例：

const App = () => {

  const onClickDiv = (evt) => {
    if (evt.target.role === 'dropdown') {
      console.warn('clicked on dropdown button. Do something different.')  
    } else {
      console.warn('clicked on div, but not on dropdown button')
    }
    
  }

  const onClickDropdownButton = () => {
    console.log('do stuff with dropdown button')
  }


  return (
    <div style={{ border: 'red solid 1px' }} onClick={onClickDiv}>
        My clickable div
        <div>
          <button onClick={onClickDropdownButton} role="dropdown">Dropdown Button</button>
        </div>
    </div>
  )
}


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

div {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

请注意，任何其他检查也有效。我只需要想出一种方法来知道用户点击了 div 中的下拉按钮，而不是同一个 div.

中的其他地方

Answer 1

标签有效，我相信其他道具也有效

const onClickDiv = (evt) => {
    if (evt.target.tagName === "BUTTON") {
      console.warn("clicked on dropdown button. Do something different.");
    } else {
      console.warn("clicked on div, but not on dropdown button");
    }
  };

姓名：

if (evt.target.name === "dropBtn") {
  console.warn("clicked on dropdown button. Do something different.");
} else {
  console.warn("clicked on div, but not on dropdown button");
}
  };

但这需要将其添加到 html

<div
  name="dropDiv"
  style={{ border: "red solid 1px" }}
  onClick={onClickDiv}
>
  My clickable div
  <div>
    <button name="dropBtn" onClick={onClickDropdownButton} role="dropdown">
      Dropdown Button
    </button>
  </div>
</div>

Answer 2

我相信您需要做的就是在单击按钮时停止传播事件，因此您可以在一个事件处理程序中处理按钮单击和 div 单击（但不是按钮上的单击） ) 在另一个。

无需使用 role 或其他任何方式进行区分。

const App = () => {

  const onClickDiv = (evt) => {
    if (evt.target.role === 'dropdown') {
      console.warn('clicked on dropdown button. Do something different.')  
    } else {
      console.warn('clicked on div, but not on dropdown button')
    }
    
  }

  const onClickDropdownButton = (evt) => {
    console.log('do stuff with dropdown button')
    evt.stopPropagation();
  }


  return (
    <div style={{ border: 'red solid 1px' }} onClick={onClickDiv}>
        My clickable div
        <div>
          <button onClick={onClickDropdownButton} role="dropdown">Dropdown Button</button>
        </div>
    </div>
  )
}


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

div {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 3

因为有 2 个事件处理程序。一个在 div 上，它暗示 div 本身和 div 的子组件。因此，当您单击 div 时，按钮 [ 作为 div 的子组件 ] 也会触发其事件处理程序。最简单的方法是添加

event.stopPropagation()

在子组件[按钮]上，而不是在父组件[div]上。实际上，如果子组件和父组件都有一些事件处理程序，它会停止触发父组件。您的事件处理程序应如下所示：

const onClickDropdownButton = (event) => {
    event.stopPropagation();
    console.log('do stuff with dropdown button')
  }

记住event.stopPropagation总是停止父组件的事件传播，这意味着你不能在父组件上应用stopPropagation阻止子组件触发其事件处理程序。

如何通过evt对象获取元素的角色？或者任何其他可区分的属性

How can I get the role of an element through the evt object? Or any other distinguishable properties really

javascript

dom

dom-events

reactjs