【Angular Material】iOSやAndroidでタッチ操作が反応しない時の対応

最近、Angular Materialのコードをちょっと試しに使っているのですが、iOSやAndroidの場合に画面タッチ後にタッチ位置を移動しても反応しないといった現象があったので、その時の対応内容です。

原因としては、Angular Material（ngMaterial）を組み込むと、「material.core.gestures」モジュールによってマウス（タッチ）操作が監視されるようになるみたいで、それによって色々なジェスチャー操作が可能になっている(？)のですが、どうもこの機能がiOSやAndroidの時のタッチ操作を邪魔しているようでした。

以下は、Angular Materialのソースコードから関係していると思われるコードを抜粋したものです。

function MdGesture($MdGestureHandler, $rAF, $timeout) {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  var isIos = userAgent.match(/ipad|iphone|ipod/i);
  var isAndroid = userAgent.match(/android/i);
  var touchActionProperty = getTouchAction();
  var hasJQuery =  (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);

  var self = {
    handler: addHandler,
    register: register,
    isIos: isIos,
    isAndroid: isAndroid,
    // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
    isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack
  };

  ...
}

対処した内容は簡単で、configでskipClickHijack()メソッドを呼び出すだけです。

angular.module('MyApp', ['ngMaterial'])
.config(function ($mdGestureProvider) {
    $mdGestureProvider.skipClickHijack();
});

skipClickHijack()を呼び出すことで、本来動くはずのジェスチャー操作が動作しないことがあるかもしれませんが、今のところ、この設定で問題は発生していません。

原因の方で抜粋したコードを見る限り、jQueryを組み込んでいたら今回のような問題は発生しなくなるような気もしないですが、そこは確認していないのでちょっとわかりません。

• <md-button> ng-click fires inconsistently with Ionic Framework/ng-Material latest versions · Issue #1406 · angular/material · GitHub