如何使用角度指令捕获触摸事件

我希望能够捕捉到用户通过触摸设备上的一组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-触摸库，但它确实不支持垂直触摸动作，令人惊讶。在这一点上，任何帮助都会受到大力赞赏。。。

来源

2013-11-27 blaster

它可能与这个问题有关：[iphones-safari-touchmove-event-not-working] [1]？ [1]：http://stackoverflow.com/questions/3531997/iphones-safari-touchmove-event-not-working –

您好，我遇到同样的问题。你能告诉我你是如何解决它？ –

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

最好的解决方案是将touchmove绑定到父元素，然后计算当前触点下的哪个子元素。这是在jQuery上下文Crossing over to new elements during touchmove中回答的。

您需要遍历父级上的每个子元素并检查触点是否在其边界内。

来源

2013-12-02 09:43:52 eddiec

谢谢。可悲的是，这是必要的 - 但激动，它的工作！ – blaster

-1

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

来源

2014-08-11 09:50:01 Delagen

如何使用角度指令捕获触摸事件

回答

相关问题