时间戳

首页 > 解决方案 > 当元素阻止光标消失时，React onMouseEnter 不会在 Chrome 中触发

javascript - 当元素阻止光标消失时，React onMouseEnter 不会在 Chrome 中触发

问题描述

注意：这似乎是仅限 Chrome 的问题

onMouseEnter当阻止事件元素的元素消失时，React 当前不会触发事件。标准 JS 事件甚至委托事件都不是这种情况。

这是我遇到的问题的简化描述和代码示例；当来自下部元素的工具提示消失（并且光标位于上部元素上方）时，onMouseEvent不会触发：

当元素阻塞光标消失时，React onMouseEnter 事件不会触发

function reactMouseEnter({currentTarget}) {
  console.log('React Mouse Enter Event');
  const rect = currentTarget.getBoundingClientRect();
  const tooltip = document.createElement('div');
  tooltip.classList.add('tooltip');
  tooltip.style.top = rect.y - 30 + 'px';
  document.body.appendChild(tooltip);

  const mouseLeaveHandler = () => {
    currentTarget.removeEventListener('mouseleave', mouseLeaveHandler);
    setTimeout(() => {
      tooltip.parentNode.removeChild(tooltip);
    }, 300);
  };

  currentTarget.addEventListener('mouseleave', mouseLeaveHandler);
}

class Example extends React.Component {
  ref = React.createRef()
  componentDidMount() {
    this.ref.current.addEventListener('mouseenter', () => {
      console.log('Regular Mouse Enter Event');
    })
  }
  render() {
    return (
      <div>
        <div onMouseEnter={ reactMouseEnter } ref={this.ref} className="box" />
        <div onMouseEnter={ reactMouseEnter } className="box" />
      </div>
    );
  }
}

ReactDOM.render(<Example /> , document.getElementById('example'));
.box {
  border: 1px solid black;
  height: 28px;
  margin-bottom: 10px;
  position: relative;
  width: 28px;
}

.tooltip {
  width: 30px;
  height: 30px;
  background-color: lightcoral;
  position: absolute;
}
<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.3.2/umd/react-dom.production.min.js"></script>

<div id="example" style="margin-top: 30px;"></div>

我可以在 React 中做些不同的事情来开始onMouseEnter工作吗？我也尝试过使用onMouseOver，但它在我的实际实现中产生了其他意想不到的副作用，所以我更愿意看看这是否可以用onMouseEnter.

标签： javascriptreactjsgoogle-chrome

解决方案

这在技术上是有意的，因为 onMouseEnter 仅在元素的边框上触发。您想使用 onMouseOver。

你可以在这里看到这个演示比较，带有计数器的中心框不是元素的一部分，所以用它来测试。

推荐阅读