angularjsangularjs-ng-touch

Suppress ng-click action upon ng-swipe-left


Button works perfectly on touchscreen when clicking or left-swiping:

  <button ng-click="click(it)" ng-swipe-left="leftSwipe(it)" />

However, on the desktop where left-swipe is accomplished by combining a mouse-click with a left-drag, the click event is also fired.

Is there any way I could suppress this?


Solution

  • Well I didn't find anything simple, so here is one workaround and one semi-suppression, both rely on $timeout, but given you rely on human interaction I think we're ok.

    Semi-Suppression: we'll want to ignore clicks this digest cycle and return to listen to the event next digest cycle.

    $scope.leftSwipe = function(event){
            angular.element(event.target).unbind('click');
            $timeout(function(){angular.element(event.target)
                 .bind('click', function(it) {$scope.click(it);})},0);
          };
    

    Here we pass the event to the 'left-swipe' function in order to get the target element, if you do not want to pass the event as parameter (depending on your code) you can grab an element hardcoded id either with query ($('#yourButtonId')) or without (document.querySelector('#yourButtonId')) and use it instead. Take note that re-handling click event here will require passing the params (in your case 'it'?) again, that is why it is wrapped in another function and not called directly.

    Workaround: I'd consider this much simpler but it's up to you and the code.

    var hasSwiped = false;
    
    $scope.click = function(event){
      if (!hasSwiped){
        ...
      }
    };
    $scope.leftSwipe = function(event){
      hasSwiped = true;
      $timeout(function(){ hasSwiped = false; },1000);
    };
    

    Here we simply create a variable 'hasSwiped' and set it to true once swiping and reseting it to false only after the 'click' event has fired (it depends on the app, but one second sounds reasonable to me between a swipe and click). In the click event just check this flag if raised or not.
    Hope this helps, Good Luck!