Touch equivalent Events for MouseOverEvent and MouseOutEvent not working on Mobile?

Question

I use mgwt and I tried to implement MouseOverEvent and MouseOutEvent for a TouchPanel as the following example shows. It turns out the these events are not working on mobile devices like the iPhone.

On Desktop: Both events work when you have mouse button up or down.

On Mobile: Not working! MouseOverEvent is triggert when I perform a click.

Is there a Touch equivalent implementation for these events like TouchOverEvent or TouchOutEvent?

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());
    }
    
}

Edit: I know that there is TouchStartEvent and TouchEndEvent but they do not trigger if the touch start on a different element than you want the TouchStartEvent to be triggered. See the following Image as an example. If you put your finger (on mobile) on the green area and swipe on the blue area without releasing your finger than the TouchStartEvent is not triggered on the blue area. The TouchEndEvent on the other hand is triggered on the blue area when you release your finger there.

Is there any change to get the TouchStartEvent be triggered on the blue area if you start the Touch on the green area and swipe to the blue area?

Edit: I made a sample project with mgwt here: https://github.com/confile/popup-test

Answer 1

I would solve it like this:

• register touch move, touch start, touch end handler on the parent panel (green)
• use this handler to tracke the moving of the finger on the canvas
• determine based on the coordinates of the blue panel if the finger is inside or not, I think you cannot track any events here if they have not been started in the blue panel
• the touch end event of the green panel should determine if the touch ended in the blue panel or not

That's it. It should work in all browsers.