wheelイベントでトラックパッドのピンチイベントを取得する 🖱

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
});