如果您触摸并移动到元素中，则不会触发pointerenter事件。

Question

我正在尝试构建一个React应用，其中用户触摸一个元素，然后在仍然按住的情况下移动到相邻的元素。当用户触摸第一个元素时，pointerover和pointerenter事件会触发，但是当用户将指针移动到相邻的元素时，这些事件并不会触发。我想知道指针何时进入任何元素，而不管触摸是否始于该元素。（如果指针元素是鼠标而不是触摸，则此点和拖动行为按预期工作。）

示例代码pen尝试使用各种事件：https://codepen.io/skedwards88/pen/OJOXwRm 如果使用鼠标，当您进入一个元素时，pointerover和pointerenter事件会被触发，即使鼠标被点击并拖动到该元素中也一样。（这是我想要的行为。）但是，如果您使用触摸，在您按下并将触摸移动到另一个元素时，pointerover和pointerenter不会为该第二个元素触发。

来自codepen的代码

JSX

function App() {

  function myF(e, myv) {
    // e.preventDefault()
    console.log(`POINTER ${myv}`)
  }


  return (
    <div className="App">

      <div>
        <div onPointerMove={(e) => myF(e, "a")}>pointer move</div>
        <div onPointerMove={(e) => myF(e, "b")}>pointer move</div>
        <div onPointerOver={(e) => myF(e, "a")}>pointer over</div>
        <div onPointerOver={(e) => myF(e, "b")}>pointer over</div>
        <div onPointerEnter={(e) => myF(e, "a")}>pointer enter</div>
        <div onPointerEnter={(e) => myF(e, "b")}>pointer enter</div>
        <div onPointerMoveCapture={(e) => myF(e, "a")}>pointer move capture</div>
        <div onPointerMoveCapture={(e) => myF(e, "b")}>pointer move capture</div>
      </div>
      <div>
        <div className="no-touch" onPointerMove={(e) => myF(e, "a")}>pointer move, touch-action none</div>
        <div className="no-touch" onPointerMove={(e) => myF(e, "b")}>pointer move, touch-action none</div>
        <div className="no-touch" onPointerOver={(e) => myF(e, "a")}>pointer over, touch-action none</div>
        <div className="no-touch" onPointerOver={(e) => myF(e, "b")}>pointer over, touch-action none</div>
        <div className="no-touch" onPointerEnter={(e) => myF(e, "a")}>pointer enter, touch-action none</div>
        <div className="no-touch" onPointerEnter={(e) => myF(e, "b")}>pointer enter, touch-action none</div>
        <div className="no-touch" onPointerMoveCapture={(e) => myF(e, "a")}>pointer move capture, touch-action none</div>
        <div className="no-touch" onPointerMoveCapture={(e) => myF(e, "b")}>pointer move capture, touch-action none</div>
      </div>
      <div>
        <div onTouchMove={(e) => myF(e, "a")}>touch move</div>
        <div onTouchMove={(e) => myF(e, "b")}>touch move</div>
        <div onTouchMoveCapture={(e) => myF(e, "a")}>Touch move capture</div>
        <div onTouchMoveCapture={(e) => myF(e, "b")}>Touch move capture</div>
      </div>
      <div>
        <div onMouseMove={(e) => myF(e, "a")}>mouse move</div>
        <div onMouseMove={(e) => myF(e, "b")}>mouse move</div>
        <div onMouseOver={(e) => myF(e, "a")}>mouse over</div>
        <div onMouseOver={(e) => myF(e, "b")}>mouse over</div>
        <div onMouseEnter={(e) => myF(e, "a")}>mouse enter</div>
        <div onMouseEnter={(e) => myF(e, "b")}>mouse enter</div>
        <div onMouseMoveCapture={(e) => myF(e, "a")}>mouse move capture</div>
        <div onMouseMoveCapture={(e) => myF(e, "b")}>mouse move capture</div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

CSS

.App {
  display: flex;
  flex-direction: row;
}

div {
  border: 1px solid black;
  padding: 10px;
}

.no-touch {
  touch-action: none;
/*   pointer-events: all; */
}

HTML

<div id="root">
</div>

- skedwards88

Answer 1

感谢这个评论解决了我的问题：https://github.com/w3c/pointerevents/issues/178#issuecomment-1029108322

例如，将onPointerDown={(e) => handlePointerDown(e)}添加到我的元素中，并定义handlePointerDown如下：

  function handlePointerDown(e) {
    e.target.releasePointerCapture(e.pointerId)
  }

- skedwards88

Answer 2

我犯了一个新手错误，就是在顶层 App 组件中声明了功能组件。这里有更多详细信息，供其他遇到同样问题的人参考：https://github.com/facebook/react/issues/23238#issuecomment-1031936780。

- skedwards88