タッチの強さを取得する (iPhone 6s以降/Force touch/3D touch)

説明

iPhone 6s以降ではタッチの強さを取得することができます。タッチが開始された場合、タッチしたまま移動した場合にイベントハンドラを設定します。このイベントハンドラにはパラメーターとしてイベントオブジェクトが渡されます。タッチされた指の本数に応じてtouches配列にタッチ情報を持つオブジェクトが入ります。このオブジェクトのforceプロパティを読み出せばタッチの強さを取得することができます。
なお、preventDefault()メソッドを使ってブラウザのデフォルトの動作を禁止しておく必要があります。

サンプルプログラム

window.onload = function(){
document.getElementById("block").ontouchstart = getForceValue;
document.getElementById("block").ontouchmove = getForceValue;
// 強さを取得する関数
function getForceValue(evt){
var n = evt.touches[0].force;
document.getElementById("result").innerHTML = n;
evt.preventDefault();
}
}
サンプルを実行
[戻る]