一部Android端末でeventからlayerXを取得できない

3405 ワード
Android JavaScript Chrome JavaScript テキストリンク

経緯

HTML5のcanvasを使用してブラウザから操作できるお絵かきツールを作成中、iOS端末のSafariでは取得できた座標情報（layerX,layerY）がundefinedになってしまい、動作しないことを確認

以下のようなイベントリスナーでユーザのタッチイベントを取得していたが、iOS/SafariとAndroid/Chromeでは取得するイベント情報が異なっている

canvas.js
canvas.addEventListener('touchmove', (e) => {
    drawing(e.layerX, e.layerY);
});

原因はChromeが参照するTouchイベントにlayerX、layerYの座標位置が存在しない

ChromeとiOSでは取得するイベントが以下のように異なっていた。

・Chrome：Touchイベント
・iOS：Mouseイベント

対策

以下のように参照するイベントをハンドリングすることでiOSおよびChromeの双方で座標情報を正しく取得することが可能

canvas.js
canvas.addEventListener('touchmove', (e) => {
  if (e.layerX === undefined) {
    drawing(e.touches[0].pageX - canvas.offsetLeft, e.touches[0].pageY - canvas.offsetTop);
  } else{
    drawing(e.layerX, e.layerY);
  }
});

基本的にe.touches[0]でカレントのイベント情報を取得できるが、処理をしたいイベントを指定する場合には別途処理が必要。

PHP 5のthis,selfとparentキーワードの詳細チュートリアル