如何冒泡 onMouseMove 事件

Question

我有图像，当我开始悬停在上面时我想显示 div，但是当 div 悬停时 React 变得疯狂，因为在第二个 div 之后出现图像停止他的 onMouseMove 事件，状态保存变量，它将决定 div 是否出现。变量名“缩放” 我想继续触发 onMouseMove 事件，即使第二个 div 出现，有什么想法可以得到这样的东西吗？

  <img
    onMouseMove={e => {
      this.setState({ zoom: 'block' });
    }}
    onMouseLeave={() => {
      this.setState({ zoom: 'none' });
    }}
    id="productImg"
    src={images[this.state.imgActive]}
  />
)}
<div
  style={{
    display: this.state.zoom,
    float: 'right',
    overflow: 'hidden',
    zIndex: 100,
    transform: 'translateZ(0px)',
    opacity: '0.4',
    zoom: 1,
    width: 285,
    height: 285,
    backgroundColor: 'white',
    border: '1px solrgb(0, 0, 0)',
    backgroundRepeat: 'no-repeat',
    position: 'absolute',
    left: 0,
    top: 0
  }}
>

Answer 1

您似乎在 img 之上添加了一个 div。

当您的鼠标出现在 div 之上而不再在 img 之上时，因此取消事件。

我建议将 CSS 属性 pointerEvents: 'none' 添加到 div 以忽略鼠标事件并让它们由下面的元素处理。

希望对您有所帮助。

如何冒泡 onMouseMove 事件

How to Bubble onMouseMove event

javascript

reactjs

event-handling

dom-events

mouseevent