zoukankan      html  css  js  c++  java
  • 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);//在配置中加上这句话
    })
  • 相关阅读:
    调参过程中的参数 学习率,权重衰减,冲量(learning_rate , weight_decay , momentum)
    mxnet框架样本,使用C++接口
    faster-rcnn中ROI_POOIING层的解读
    SVM公式推导笔记
    RNN的简单的推导演算公式(BPTT)
    优化器--牛顿法总结
    评估一个预测模型性能通常都有那些指标
    nautilus出现一闪而过现象
    PIL遇到问题解决
    使用神经网络来拟合函数y = x^3 +b
  • 原文地址:https://www.cnblogs.com/Miracle-ZLZ/p/7729777.html
Copyright © 2011-2022 走看看