html 如何在用户将鼠标悬停在要选择的选项上时获取事件

zqry0prt 于 2023-03-06 发布在其他

关注(0)|答案(1)|浏览(178)

我想在用户将鼠标悬停在选择选项上时得到一个事件。我希望选项组件上的onMouseOver或onDragOver属性在这里给予我一个事件，但它们只在父选择组件上起作用。
下面是一个简化示例：

<select
  id="inputPath"
  value={selected.input_path}
  className="form-control"
>
  {nodes.map((node, i) => {
    return [
      <option
        onMouseOver={(e) => console.log('Nothing!', e)}
        key={`select-input-input-${i}`}
        value={`${toLower(node.text)}/input/`}
      >{`${toLower(node.text)}/input/`}</option>
    ];
  })}
</select>

Html

来源：https://stackoverflow.com/questions/75601834/how-to-get-event-when-user-hovers-over-option-to-select

1条答案

按热度按时间

b0zn9rqh1#

onMouseOver事件应该对option元素起作用，但它可能不会触发，因为option元素位于select元素内部，而select元素可能首先捕获事件。
解决这个问题的一种方法是使用select元素上的onMouseMove事件来检测鼠标何时停留在某个选项上。

<select
  id="inputPath"
  value={selected.input_path}
  className="form-control"
  onMouseMove={(e) => {
    const target = e.target;
    const selectedOption = target.options[target.selectedIndex];
    if (selectedOption && selectedOption !== e.currentTarget) {
      console.log('Hovering over option:', selectedOption.value);
    }
  }}
>
  {nodes.map((node, i) => {
    return (
      <option
        key={`select-input-input-${i}`}
        value={`${toLower(node.text)}/input/`}
      >
        {`${toLower(node.text)}/input/`}
      </option>
    );
  })}
</select>

赞(0）回复(0）举报 2023-03-06

我来回答

html 如何在用户将鼠标悬停在要选择的选项上时获取事件

1条答案

相关问题

热门标签

最新问答