Macのトラックパッドのピンチイン・ピンチアウトをJavaScriptで取得したい場合、wheelイベントを使います。
ピンチイン・ ピンチアウト、ホイールを区別しない場合
DEMO
👆 ピンチイン・ピンチアウト、マウスホイールで値が更新されます
ソースコード(抜粋)
JavaScript
document.getElementById('event').addEventListener('wheel', (evt) => { evt.preventDefault(); value += evt.deltaY; document.getElementById('event').innerText = value; }, { passive: false });
ポイントとしては、ホイールイベントのデフォルトの動作のブラウザの拡大を防ぐために、preventDefaultを実行しているところです。
ピンチイン・ ピンチアウト、ホイールを区別したい場合
Macのトラックパッドはマウスホイールイベントの入力も、ピンチイベントの入力も可能な優れものなので、ホイールだけ、ピンチだけにイベントを設定したい場合、ちょっとした工夫が必要になります。
ピンチ
ホイール
これは、完全に経験則で、いつ仕様が変わるかわからないのですが、ピンチイベントの場合、event.deltaX、event.deltaYに小数が、ホイールイベントの場合、event.deltaX、event.deltaYに整数が入ってくるので、いまのところはそこで判断できます。
DEMO
👆 ピンチイン・ピンチアウト「pinch」、マウスホイールで「wheel」と表示されます
ソースコード(抜粋)
JavaScript
document.getElementById('event').addEventListener('wheel', (evt) => { const isPinch = !!(evt.deltaY % 1); evt.preventDefault(); document.getElementById('event').innerText = isPinch ? 'pinch' : 'wheel'; }, { passive: false });