How to Capture Touch Events with Angular Directive

Question

I would like to be able to capture the fact that a user moved their finger through a set of DOM elements on a touch device. This example works fine on a desktop browser but does not fire all the expected events when viewed in mobile Safari.

Working Plunkr (demonstrates the issue on mobile safari): http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2

HTML:

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!  This works from a desktop browser but not from mobile Safari.  I would simply like to be able to drag my finger down, across all four letters, and have their events fire.  I thought that touchMove would work in place of mouseMove when running this Plunkr on iOS, but it doesn't.</p>  Current letter: {{currentLetter}}

    <div swipe-over="swipeOver()">A</div>
    <div swipe-over="swipeOver()">B</div>
    <div swipe-over="swipeOver()">C</div>
    <div swipe-over="swipeOver()">D</div>
</body>

Javascript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $log) {
  $scope.name = 'World';
  $scope.currentLetter = "";

  $scope.swipeOver = function() {
    $log.info("In swipeOver");
  };
});

app.directive('swipeOver', function($log) {
  return {
    restrict: "A",
    scope: true,
    link: function(scope, element, attrs) {
      // For touch devices
      element.bind("touchmove", function() {
        scope.$apply(function(evt) {
          $log.info("in touchmove - " + element.text());

          scope.$parent.currentLetter = element.text();
        });
      });

      // For desktops
      element.bind("mousemove", function(evt, e2) {
        scope.$apply(function() {
            $log.info(evt);
            $log.info(e2);
            $log.info("in mousemove - " + element.text());

            scope.$parent.currentLetter = element.text();
        });
      });
    }
  };
});

I have tried the ng-touch library but it does not support vertical touch movements, amazingly. Any help would be massively appreciated at this point . . .

Could it be related to this question: [iphones-safari-touchmove-event-not-working][1]? [1]: http://stackoverflow.com/questions/3531997/iphones-safari-touchmove-event-not-working — Marcus Rådell, Dec 02 '13 at 08:18
Hi, i'm having the same problem. can you please show me how did you resolve it? — אVי, Jan 26 '15 at 07:57

score 4 · Accepted Answer · edited May 23 '17 at 11:58

4

This is a limitation of touchmove currently, and I'm afraid there's no really good answer.

The best solution is to bind touchmove to a parent element and then calculate which child element is under the current touch point. It's answered in a jQuery context here Crossing over to new elements during touchmove.

You'll need to cycle through each of the child elements on the parent and check if the touch point is within their bounds.

edited May 23 '17 at 11:58

Community

1
1

answered Dec 02 '13 at 09:43

eddiec

7,608
5
34
36

Thank you. Sad that this was necessary - but thrilled that it worked! – blaster Dec 09 '13 at 16:09

score -2 · Answer 2 · answered Aug 11 '14 at 09:50

-2

Use Hammer.JS, it's the best I know. Angular-Hammer can be easily modified to support version 2.

answered Aug 11 '14 at 09:50

Delagen

5
2

How to Capture Touch Events with Angular Directive

2 Answers2

Linked