如何使用角度指令捕獲觸摸事件

我希望能夠捕捉到用戶通過觸摸設備上的一組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

如何使用角度指令捕獲觸摸事件

回答

相關問題