We have a mobile app exhibiting very odd behavior. On desktops it works fine. But on mobile devices, touch events are not being handled properly.

This is the event setup code:

document.addEventListener('mousemove', e =>
        {
            this.mouseMoveListener(e);
        });

        document.addEventListener('mousedown', e =>
        {
            this.mouseDownListener(e);
        });

        document.addEventListener('mouseup', e =>
        {
            this.mouseUpListener(e);
        });
    
        document.addEventListener('touchmove', e => firstTouchEventCancel(this.mouseMoveListener(e)), true);
        document.addEventListener('touchstart', e => firstTouchEventCancel(this.mouseDownListener(e)), true);
        document.addEventListener('touchend', e => firstTouchEventCancel(this.mouseUpListener(e)), true);

the function firstTouchEventCancel is as follows:

export function firstTouchEventCancel(fn, thisObj)
{
    if (thisObj)
    {
        fn = fn.bind(thisObj)
    }
    return function (e)
    {
        e.preventDefault()
        e.stopPropagation()
        return fn(e.changedTouches[0])
    }
}

I've logged the e / event variable immediately in both the firstTouchEventCancel method and in the event handler methods. In both cases the event is an empty object.

I need the event to tell me where the user touched and swiped if they are swiping. But I'm getting nothing. There are no other event handlers setup that might be consuming the event. Plus if there were these methods would not be called.

Has anyone run into this?

In all of the event handlers on mobile the events sent to the listeners are empty.