BuildFire自定义Ionic插件在iOS10/11需双击触发点击问题求助

首先，既然你的插件在独立Ionic应用里一切正常，问题肯定出在BuildFire容器与你的Ionic/AngularJS代码的交互上，尤其是iOS10+的WebView环境下的事件处理差异。我帮你梳理几个大概率的排查方向和解决方案：

1. 排查BuildFire容器的事件拦截或300ms延迟残留 #

虽然iOS9之后苹果默认取消了点击事件的300ms延迟，但有些第三方容器（比如BuildFire）可能没有正确配置WebView的相关参数，或者注入了自定义的触摸事件处理逻辑，导致单次点击被拦截或延迟。

• 先检查插件的index.html里的viewport设置，确保添加了禁用缩放的属性，强制WebView取消300ms延迟：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 用Safari Web Inspector连接iOS设备，在按钮元素上监听touchstart、touchend、click事件，打印日志看第一次点击时哪些事件被触发。如果click事件没触发但touch事件触发了，说明容器可能拦截了click事件。

2. 替换AngularJS的ng-click为触摸优先的事件绑定 #

AngularJS 1的原生ng-click依赖于浏览器的click事件，在某些容器环境下可能和触摸事件冲突。可以尝试以下两种方式：

• 使用ngTouch模块：引入angular-touch.js，在你的Angular模块中注入ngTouch，然后把所有ng-click替换为ng-tap。ng-tap会优先处理touchstart事件，避免点击延迟或拦截问题。
• 自定义快速点击指令：如果ngTouch不生效，自己写一个指令直接绑定touchstart事件：

  angular.module('yourApp')
    .directive('fastTap', function() {
      return {
        link: function(scope, element, attrs) {
          element.on('touchstart', function(e) {
            // 阻止默认行为避免触发两次事件
            e.preventDefault();
            // 触发绑定的函数
            scope.$apply(attrs.fastTap);
          });
        }
      };
    });
  

  然后在按钮上使用：

  <button fast-tap="yourClickHandler()">触发操作</button>
  

3. 检查BuildFire容器的层级遮罩 #

有时候BuildFire的容器会在插件页面上方添加透明的遮罩层（比如用于处理导航或弹窗），导致第一次点击实际上触发在遮罩上，第二次才落到你的按钮上。

• 用Safari Web Inspector查看页面的DOM结构，检查是否有z-index较高的透明元素覆盖在按钮上方。如果有，可以尝试调整插件元素的z-index，或者联系BuildFire确认是否可以禁用不必要的容器遮罩。

4. 确保AngularJS在BuildFire初始化完成后启动 #

BuildFire有自己的应用生命周期，如果你直接在HTML里用ng-app初始化AngularJS，可能会在BuildFire容器还没准备好的时候就绑定了事件，导致事件失效。

• 改成手动启动AngularJS，在BuildFire的onReady回调里初始化：

  buildfire.messaging.onReady(function() {
    angular.bootstrap(document, ['yourAppModule']);
  });
  

  同时去掉HTML中的ng-app属性。

这些方法应该能帮你定位并解决iOS10+上的双击问题，毕竟核心差异就在BuildFire容器的WebView环境和原生Ionic应用的环境不同。

内容的提问来源于stack exchange，提问作者Milesteps