This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Touch.force read-only property returns the amount of pressure the user is applying to the touch surface for a Touch point.
Syntax
touchItem.force;
Return value
A float that represents the amount of pressure the user is applying to the touch surface. This is a value between 0.0 (no pressure) and 1.0 (the maximum amount of pressure the hardware can recognize). A value of 0.0 is returned if no value is known (for example the touch device does not support this property). In environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary.
Example
This example illustrates using the Touch interface's Touch.force property. This property is a relative value of pressure applied, in the range 0.0 to 1.0, where 0.0 is no pressure, and 1.0 is the highest level of pressure the touch device is capable of sensing.
In following code snippet, the touchstart event handler iterrates through the targetTouches list and logs the force value of each touch point but the code could invoke different processing depending on the value.
someElement.addEventListener('touchstart', function(e) {
// Iterate through the list of touch points and log each touch
// point's force.
for (var i=0; i < e.targetTouches.length; i++) {
// Add code to "switch" based on the force value. For example
// minimum pressure versus maximum pressure could result in
// different handling of the user's input.
console.log("targetTouches[" + i + "].force = " + e.targetTouches[i].force);
}
}, false);
Specifications
| Specification | Status | Comment |
|---|---|---|
| Touch Events – Level 2 | Editor's Draft | Initial definition. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? |
| Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | ? | (Yes) | (Yes) | ? | ? | (Yes) |