Touch相当于Mouseout事件是什么？

Question

使用桌面浏览器时，您可以使用 JavaScript 事件 mouseout。

使用移动浏览器时，您只有触摸事件。试图找到 mouseout 事件的等效项。事实证明 touchend 事件并不等同，因为它仅在触摸在注册触摸处理程序的元素中结束时才会触发。

是否有相当于mouseout事件的触摸？

Answer 1

请参阅 MDN 的这篇文章

具体来说，

touchend

当用户将手指离开表面时，会发生 touchend 事件 已发送。

不过，您可能还想参考

touchcancel

如果用户的手指进入浏览器 UI，或者触摸其他情况 需要取消，发送touchcancel事件

Answer 2

如果您正在寻找一种模仿“mouseout”事件的方法，我在“touchmove”和“touchend”事件中进行了此实现。

element.addEventListener("touchmove", (e) => {
 if (this.isTouchEventWithElement(e)) return;
 // PERFORM MOUSEOUT ACTION
});


element.addEventListener("touchend", (e) => {
 if (this.isTouchEventWithElement(e)) return;
 // PERFORM MOUSEOUT ACTION
});


isTouchEventWithElement(e: TouchEvent): boolean {
 const element = this.getElement();
 const item = e.changedTouches.item(0);
 if (element === null || item === null) return false;
 return element.getBoundingClientRect().right > item.clientX &&
     element.getBoundingClientRect().left < item.clientX &&
     element.getBoundingClientRect().top < item.clientY &&
     element.getBoundingClientRect().bottom > item.clientY;
}

希望有帮助。

灵感来源：http://www.javascriptkit.com/javatutors/touchevents.shtml

Answer 3

不同的解决方案：

我也在努力解决触摸取消事件与鼠标移出事件完全不同的问题。我认为目前手机屏幕上还没有这样的事件。

我是如何解决的：

我只是使用

touchmove

事件来模拟

mouseout

事件。我知道这可能不是您正在寻找的解决方案。并且在某些用例中这根本没有帮助。但对于我的用例，我对其进行了测试，用户体验结果非常好。你可以尝试一下。