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);//在配置中加上这句话
    })
  • 相关阅读:
    git 学习网站
    Vue 部署在 IIS 上
    Element UI 的坑
    Vue 中 Prop 传至的 一个Bug
    Asp.net Core 部署在 IIS上
    今天用UniApp开发, 用到 Vuex 中的 mutations, 设置值的时候好像只能传2个参数, 第一个是固定的state, 第二个是一个值, 不能传第三个了
    anxios 和 uni.request 访问Asp.net 服务器传参出错的坑
    内网计算机设置问题说明
    关于综合布线
    Android学习 -- Activity 以及Activity之间值传递
  • 原文地址:https://www.cnblogs.com/Miracle-ZLZ/p/7729777.html
Copyright © 2011-2022 走看看