angularJS在移动端的点击事件延迟问题
在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟。后来发现angular有一个专门针对移动端的模块:angular-touch.js,其中对ng-click做了兼容性处理,以下为该模块中部分内容:
/** * @ngdoc method * @name $touchProvider#ngClickOverrideEnabled * * @param {boolean=} enabled update the ngClickOverrideEnabled state if provided, otherwise just return the * current ngClickOverrideEnabled state * @returns {*} current value if used as getter or itself (chaining) if used as setter * * @kind function * * @description * Call this method to enable/disable {@link ngTouch.ngClick ngTouch's ngClick directive}. If enabled, * the default ngClick directive will be replaced by a version that eliminates the 300ms delay for * click events on browser for touch-devices. * * The default is `false`. * */ var ngClickOverrideEnabled = false; var ngClickDirectiveAdded = false; // eslint-disable-next-line no-invalid-this this.ngClickOverrideEnabled = function(enabled) { if (angular.isDefined(enabled)) { if (enabled && !ngClickDirectiveAdded) { ngClickDirectiveAdded = true; // Use this to identify the correct directive in the delegate ngTouchClickDirectiveFactory.$$moduleName = 'ngTouch'; $compileProvider.directive('ngClick', ngTouchClickDirectiveFactory); $provide.decorator('ngClickDirective', ['$delegate', function($delegate) { if (ngClickOverrideEnabled) { // drop the default ngClick directive $delegate.shift(); } else { // drop the ngTouch ngClick directive if the override has been re-disabled (because // we cannot de-register added directives) var i = $delegate.length - 1; while (i >= 0) { if ($delegate[i].$$moduleName === 'ngTouch') { $delegate.splice(i, 1); break; } i--; } } return $delegate; }]); } ngClickOverrideEnabled = enabled; return this; } return ngClickOverrideEnabled; };
其中说明引用该模块,可以将ng-click替换为兼容移动端的点击事件,具体代码如下:
angular.module('myapp',['ngTouch']) .config(['$touchProvider',function ($touchProvider) { $touchProvider.ngClickOverrideEnabled(true); }])
更新于2017.11.2
后来发现angular-touch模块覆盖原本的ng-click之后出现了点击穿透的BUG,并且a标签和button的点击事件300ms延迟并没有消失,后来还是选择用fastclick.js好了,在angular中引入fastclick也非常简单,并且使用fastclick之后,a标签的点击事件的延迟也消失了。
一共就两行代码:
<script src="./lib/fastclick.min.js"></script> //引入fastclick文件
myapp.config("xxxx",function(){
FastClick.attach(document.body);//在配置中加上这句话
})