Question

Some touch-enabled browsers (such as Mobile Safari) have a scale and rotation property available on their event object for events such as touchmove.

I can detect support for the scale property like so...

document.body.addEventListener("touchmove", function(event) {
    var supportsScaleProperty = !!event.scale;
});

However, is there a way to detect it without having to bind a listener and then look for the property in the callback?

For example, if this worked?

var supportsScaleProperty = !!(new CustomEvent("TouchEvents")).scale;

I tried looking at createEvent(), but it's deprecated. I looked at new CustomEvent(), but wasn't sure which string to use for touch events.

Was it helpful?

Solution 2

This doesn't seem to be possible. TJ's solution doesn't tell me if the properties exist (they're never present, even on devices which support them).

So, it looks like I'm stuck with...

document.body.addEventListener("touchmove", function(event) {
    if (event.scale) {
         // ...
    }
});

OTHER TIPS

You may be able to use an Event constructor:

if ('scale' in new Event("touchmove")) {
    // It has it
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top