How to determine if browser supports properties on

2019-08-17 09:02发布

问题:

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.

回答1:

You may be able to use an Event constructor:

if ('scale' in new Event("touchmove")) {
    // It has it
}


回答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) {
         // ...
    }
});