solved [SOLVED] How to prevent zoom on mobile devices?

[ozRocker]

When I drag my finger out of the viewport then back in, its registered as a 2nd touch and zooming kicks in.

I'm trying to register for "leaving" events but none of them are firing.  I have this

$("#canvas").on("mouseout touchleave dragleave touchcancel", function(e) {
    alert("touch out!");
});

This problem exists with Android and iOS.  This works on desktop browsers though.

Does anyone know which event I need to use?

[GameMonetize]

did you tried pointerleave? or perhaps just blur?

[dbawel]

First, I would capture only the first touch event from the canvas into an array such as:

    function getTouchPos(e) {
        if (!e)
            var e = event;

        if(e.touches) {
            if (e.touches.length == 1) {
                var touch = e.touches[0];
                touchX=touch.pageX-touch.target.offsetLeft;
                touchY=touch.pageY-touch.target.offsetTop;
            }
        }
    }

And then use:

Event.preventDefault();

That should do it...

DB

[dbawel]

You can also use if necessary:

window.addEventListener('mouseup', function_mouseUp, false);

For either your canvas or as a windows event.

DB

[ozRocker]

On 01/09/2017 at 2:00 AM, Deltakosh said:

did you tried pointerleave? or perhaps just blur?

This worked.

I used "pointerleave" then when that happens I trigger "pointerup" event