Реакция onMouseEnter не запускается в Chrome, когда исчезает курсор блокировки элемента

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.

Здесь вы можете увидеть демонстрационное сравнение , центральная рамка со счетчиком не является частью элемента, поэтому используйте его для проверки.