AngularJS1.1系にngMobileがあります。これが有効になるとスマートフォンでのクリックの遅延がなくなり、スワイプの利用も可能になります。
次期リリース版(1.2系)に含まれると思います。1.0系にバックポートするか1.1系を使うか、1.2系を待つのが良いと思います。
https://github.com/angular/angular.js/tree/master/src/ngMobile
スマートフォンやタブレットではJavaScriptのクリックイベントが少し遅れてくるようになっています。
普段なら自分でtouchstartイベントなどを拾って解決するところだと思いますが、AngularJSはng-clickというAngularJSの機能を使うので、その方法がそのままでは使えなさそうです。AngularJSライク？に解決したのでブログに残します。
タッチイベントが来たらクリックイベントを起こしています。
Gistにも書きました。
CoffeeScriptです。
app = angular.module('AngularStudy', []).directive 'ndClick', => ($scope, $element, $attrs) =>
isTap = isTapped = false
$element.bind 'click', => $scope.$apply $attrs['ndClick'] unless isTapped
$element.bind 'touchstart', => isTap = true
$element.bind 'touchmove', => isTap = false
$element.bind 'touchend', => if isTap
isTapped = true
$scope.$apply $attrs['ndClick'], $element
一応CoffeeScriptをコンパイルしたJavaScriptも書いておきます。
var app,
_this = this;
app = angular.module('AngularStudy', []).directive('ndClick', function() {
return function($scope, $element, $attrs) {
var isTap, isTapped;
isTap = isTapped = false;
$element.bind('click', function() {
if (!isTapped) {
return $scope.$apply($attrs['ndClick']);
}
});
$element.bind('touchstart', function() {
return isTap = true;
});
$element.bind('touchmove', function() {
return isTap = false;
});
return $element.bind('touchend', function() {
if (isTap) {
isTapped = true;
return $scope.$apply($attrs['ndClick'], $element);
}
});
};
});
使い方は今までng-clickを書いていたところをnd-clickにするだけです。
<button nd-click="hoge()">ボタン</button>
パソコンとスマートフォンの差を吸収しているので、パソコンでもスマートフォンでもnd-clickだけでカバーできます。
nd-clickはnon delay clickです。
