结合轻击和双击离子事件答案

【问题标题】：combine tap and doubletap ionic events结合轻击和双击离子事件
【发布时间】：2015-10-11 18:45:29
【问题描述】：

我搜索了一些示例，但没有找到任何解决我问题的方法。我的问题很简单，我需要一个带有两个事件的元素，一个点击和双击事件。我这样做，但事件绑定在一起，我不需要这个.. 我需要点击元素两次（双击），元素的状态被选中，如果我点击一次元素被取消选择并且现在未被选中。我也这样做，结果是一样的，事件一起触发...... 有人知道这是怎么做的吗？？

谢谢

【问题讨论】：

标签： javascript jquery angularjs html ionic

【解决方案1】：

试试这个：

请参阅 Vikas Gautam (@Vikasg7) 在CodePen 上的钢笔Tap and Double Tap Ionic。

这是指令：-

  SepTap.$inject = ["$ionicGesture"]
  function SepTap(IonicGesture) {
      return {
         restrict: "A",
         link: linkFunc
      }

      function linkFunc(scope, ele, attrs) {
         var isDoubleTap = false

         var tap = IonicGesture.on("tap", onTap, ele)
         var doubleTap = IonicGesture.on("doubletap", onDoubleTap, ele)

         function onTap() {
            setTimeout(onTap, 250)
            function onTap() {
               if (isDoubleTap) return
               scope.$apply(attrs.stTap)
            }
         }

         function onDoubleTap() {
            isDoubleTap = true
            scope.$apply(attrs.stDoubleTap)
            // onTap is called twice almost immediadetly with a delay
            // of 250ms, so using a delay of 300ms (50ms more) to 
            // reset isDoubleTap to false.
            setTimeout(function () { isDoubleTap = false }, 300)
         }

         ele.on("$destroy", function () {
            IonicGesture.off(tap, "tap", onTap)
            IonicGesture.off(doubleTap, "doubletap", onDoubleTap)
         })
      }    
   }

请检查上面的 codepen 以获得完整的实现。

【讨论】：

【解决方案2】：

http://www.gajotres.net/ionic-framework-series-13-touch-gestures/ 在 cmets 部分中说 ionic 已禁用与 onTap 相关的延迟，用于分别检测这些 Tap 类型。没有提到解决方法，只是无法立即区分它们。

片段文本：

不幸的是，一年前所做的更改消除了 Ionic 应用程序的 300 毫秒点击延迟。我说它很不幸，因为现在应用程序无法正确检测同一元素上的点击/双击。两者都会触发。

【讨论】：

如果 ionic 禁用了相关延迟，我可以用一个 setTimeout() 解决这个问题吗？？
我在 DoubleTap 事件中使用 setTimeout 解决了这个问题。谢谢

【解决方案3】：

我用

解决了

         $scope.onDoubleTap = function(event){
                setTimeout(function(){

                    if(!$(element).hasClass("selected")) {
                        $(element).addClass("selected");

                    ......
                    }
                },400);
            };
        $scope.onTap = function(event){

                if($(element).hasClass("selected")){
                     $(element).removeClass("selected");

                    .....
                }


        };

【讨论】：

我在这里假设您在控制器中编写了这些方法。控制器内部的 DOM 操作不是不好的做法吗？另外，当它有角度时，你为什么不使用 $timeout。