javascript - MouseOverEvent 和 MouseOutEvent 的触摸等效事件在移动设备上不起作用？

Question

我使用 mgwt并且我尝试为 TouchPanel 实现 MouseOverEvent 和 MouseOutEvent，如下例所示。事实证明，这些事件不适用于 iPhone 等移动设备。

在桌面上:当您按下或按下鼠标按钮时，这两个事件都会起作用。

在手机上:不工作!当我执行点击时，会触发 MouseOverEvent。

TouchOverEvent 或 TouchOutEvent 等事件是否有等效的 Touch 实现？

public class MyTouchPanel extends TouchPanel 
        implements HasMouseOverHandlers, HasMouseOutHandlers {
    
    @Override
    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
        return addDomHandler(handler, MouseOverEvent.getType());
    }
    
    @Override
    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
        return addDomHandler(handler, MouseOutEvent.getType());
    }
    
}

编辑:我知道有 TouchStartEvent 和 TouchEndEvent，但如果触摸开始于与您希望触发 TouchStartEvent 的元素不同的元素，则它们不会触发。请参见下图作为示例。如果您将手指(在移动设备上)放在绿色区域并在蓝色区域上滑动而不松开手指，则不会在蓝色区域触发 TouchStartEvent。另一方面，当您在蓝色区域松开手指时，会在蓝色区域触发 TouchEndEvent。

如果您在绿色区域开始 Touch 并滑动到蓝色区域，是否有任何变化让 TouchStartEvent 在蓝色区域被触发？

编辑:我在这里用 mgwt 做了一个示例项目:https://github.com/confile/popup-test

Answer 1

我会这样解决:

• 在父面板(绿色)上注册触摸移动、触摸开始、触摸结束处理程序
• 使用此处理程序跟踪手指在 Canvas 上的移动
• 根据蓝色面板的坐标确定手指是否在里面，我认为如果事件没有在蓝色面板中启动，你无法在这里跟踪任何事件
• 绿色面板的触摸结束事件应该判断蓝色面板的触摸是否结束

就是这样。它应该适用于所有浏览器。