结合轻击和双重轻击离子事件

combine tap and doubletap ionic events

本文关键字：事件 结合      更新时间：2023-09-26

我搜索了几个例子，但我没有找到任何解决我的问题。我的问题很简单，我需要一个元素与两个事件，一个点击和双击事件。我这样做，但事件绑定在一起，我不需要这个…我需要我点击元素两次(双击)，元素的状态被选中，如果我点击一次，元素被取消选中，现在没有被选中。我也这样做，结果是一样的，事件一起发生……有人知道怎么做吗??

谢谢

试试这个:

参见Vikas Gautam (@Vikasg7)在CodePen上的Pen Tap和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)
         })
      }    
   }

请查看以上代码以获得完整实现。

http://www.gajotres.net/ionic-framework-series-13-touch-gestures/在评论部分说ionic已经禁用了onTap相关的延迟，该延迟用于分别检测这些tap类型。没有提到任何解决方法，只是不可能将它们区分开来。

文本片段:

不幸的是，一年前所做的更改从Ionic应用程序中删除了300ms的点击延迟。我说它很不幸，因为现在应用程序不能正确地检测同一元素上的点击/双击。两者都将触发。

我用

         $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");
                    .....
                }

        };
相关文章：