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);//在配置中加上这句话
})

 

posted @ 2017-10-25 16:52  Miracle--  阅读(1576)  评论(0编辑  收藏  举报