Ionic 1框架中ng-click与on-touch的区别及最优点击事件选择

嘿，刚好对Ionic 1里这俩事件熟得很，给你掰扯清楚哈！

1. 触发时机与响应速度 #

• ng-click 是AngularJS的原生指令，为了兼容早期移动端的双击缩放逻辑，自带300ms的点击延迟。举个例子，你的这段代码：

  <ion-floating-button ng-click="vm.addExpense()" has-footer="false" icon="ion-plus" iconColor="#fff">
  

  用户按下按钮后，要等300ms才会执行vm.addExpense()，在移动端会显得有点“慢半拍”。
• on-touch 是Ionic专门为移动端优化的触摸指令，它绑定的是原生touchstart事件，手指一碰到元素就立即触发，完全没有延迟。比如你的这段代码：

  <ion-floating-button on-touch="vm.addnewCharge()" has-footer="false" button-color="rgb(84, 44, 99)" icon="ion-plus" iconColor="#fff">
  

  手指刚碰到按钮，vm.addnewCharge()就会执行，响应感拉满。

2. 触发逻辑 #

• ng-click 要求用户完成完整的“按下-抬起”动作，而且抬起时手指/鼠标必须还在元素上，才会触发事件，完全符合我们认知里的“点击”行为，不容易误触。
• on-touch 只要触摸开始（手指碰到元素）就触发，哪怕用户立刻滑动离开这个元素，方法还是会执行——这就可能导致误操作，比如用户本来想滑动页面，不小心蹭到按钮，就会触发对应的功能。

3. 跨端兼容性 #

• ng-click 同时支持移动端触摸和桌面端鼠标点击，是跨端通用的点击指令，如果你需要做兼容桌面的Hybrid应用，它能直接用。
• on-touch 只支持移动端的触摸事件，在桌面端用鼠标点击是不会触发的，属于纯移动端场景的优化指令。

得看你的应用场景来选：

• 纯移动端应用：优先选on-touch（或者更推荐Ionic的on-tap，它是触摸抬起时触发，既没有300ms延迟，又能避免误触，是Ionic移动端点击的最佳实践），体验更流畅。
• 需要兼容桌面端：果断用ng-click，它能同时适配鼠标和触摸操作，不用额外做兼容处理。
• 担心误触问题：如果on-touch容易导致误操作，就换成on-tap，它的逻辑更接近“点击”，但又保留了无延迟的优势。

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