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

Question

注意：这似乎是仅适用于Chrome的问题

当阻止事件元素的元素消失时，

React当前不会触发onMouseEnter事件。标准JS事件甚至委托事件都不是这种情况。

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

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是否可以实现。

Answer 1

从技术上讲，这是因为onMouseEnter仅在元素的边界上触发。您要使用onMouseOver。

您可以看到此demo comparison here，带有计数器的中心框不是元素的一部分，因此可以使用它进行测试。