如何捕获与角指令触摸事件(How to Capture Touch Events with Angu

我想能够捕获用户通过触摸设备上的一组DOM元素的移动手指的事实。这个例子正常工作在桌面浏览器，但在移动Safari浏览器查看时不火的所有预期的事件。

工作Plunkr（演示在移动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();
        });
      });
    }
  };
});

我曾尝试NG触摸库，但它不支持垂直触摸运动，令人惊讶。任何帮助将在此时大规模赞赏。。。

Answer 1:

这是touchmove的限制目前，我怕没有真正好的答案。

最好解决方案是touchmove绑定到父元素，然后计算其子元素是当前触摸点之下。它回答了一个jQuery上下文这里touchmove期间跨越到新的元素。

您可以通过每个父子元素的需要周期，并检查触摸点的范围内。

Answer 2:

使用Hammer.JS，这是我所知道的最好。角锤可以很容易地修改以支持第2版。