如果您触摸然后移入元素，则不会出现pointerenter事件

Question

我正在尝试构建一个 React 应用程序，用户触摸一个元素，然后在按住的同时移动到相邻元素。当用户触摸第一个元素时，pointerover 和pointerenter 事件会触发，但当用户将指针移动到相邻元素时，不会触发。我想知道指针何时进入任何元素，无论触摸是否从该元素开始。（如果指针元素是鼠标而不是触摸，则此点和拖动行为确实按我的预期工作。）

尝试各种事件的示例代码笔：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; */
}

超文本标记语言

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

Answer 1

感谢此评论解决：https://github.com/w3c/pointerevents/issues/178#issuecomment-1029108322

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

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