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

angularJS在移动端的点击事件延迟问题的更多相关文章

  1. jquery关于移动端的点击事件解析

    jquery关于移动端的点击事件解析 如果用click来写 你连续点几下 会没有反应 响应是非常慢的 所以移动端必须用touchstart代替click来写

  2. 【技术博客】移动端的点击事件与Sticky Hover问题

    目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...

  3. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  4. 移动端300ms点击事件的延迟

    移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...

  5. ios移动端浏览器点击事件失效的解决方案

    点击事件失效的原因可能是因为,你用了事件代理了, 比如这样 $(document).on("click",".fd",function(){ }) 这段代码在安 ...

  6. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  7. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  8. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  9. HTML5 移动端 自定义点击事件

    /* 封装的TAP事件 */ (function () { /** * IOS 和 PC 端 只需要创建一次就能一直使用 * Android 手机 每次使用的时候都需要从新创建 */ function ...

随机推荐

  1. resiprocate使用入门:内网搭建基于repro的sipproxy测试环境

    测试环境 sipproxy:repro + centos 客户端:windows电脑客户端使用X-Lite,手机andriod客户端使用linphone repro配置和启动 log的配置 如果使用默 ...

  2. 性能测试之Jmeter学习(八)

    本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...

  3. Redis使用的相关问题

    Redis用那些数据结构? 字符串类型String 字典Hash 列表List 集合Set 有序集合SortedSet HyperLogLog.Geo.Pub/Sub Redis Module.Blo ...

  4. Laravel中使用Session存取验证码信息

    1.将验证码存储到session中. $request->session()->put('validate_code',$validateCode->getCode());//存储信 ...

  5. UVa 11552 Fewest Flops (DP)

    题意:给一个字符串,把它分为k块,每一块里面的字母可以任意的排序.最终字符串, 连续的一样的字母算作一个chunk,问总chunks最少是多少? 析:dp[i][j] 表示第 i 个块,第 j 位在末 ...

  6. [51nod] 1007 正整数分组 dp

    将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个数N,N为正整数的数量 ...

  7. 渲染路径-surface shader 光照函数与渲染路径

    https://docs.unity3d.com/Manual/SL-SurfaceShaderLighting.html Lighting Model declaration Lighting mo ...

  8. 洛谷P4768 [NOI2018]归程(克鲁斯卡尔重构树+最短路)

    传送门 前置技能,克鲁斯卡尔重构树 我们按道路的高度建一个最大生成树,然后建好克鲁斯卡尔重构树 那么我们需要知道一颗子树内到1点距离最近是多少(除此之外到子树内任何一个点都不需要代价) 可以一开始直接 ...

  9. 洛谷 P1070 道路游戏(noip 2009 普及组 第四题)

    题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 nn个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 nn个机器人工厂编 ...

  10. PHP 扩展篇 _ 持续更新

    记住这个网站:http://pecl.php.net/ PHP-Redis扩展更新时间:2019/05/06 PHP安装Redis 1:下载目前最新版的redis插件 wget http://pecl ...