如何捕捉角指令触摸事件 [英] How to Capture Touch Events with Angular Directive
问题描述
我想能够捕获用户通过触摸设备上的一组DOM元素的移动手指的事实。这个例子正常工作在桌面浏览器，但在移动Safari浏览器查看时不火所有预期的事件。
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.
工作Plunkr（演示移动Safari浏览器的问题）：
http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2
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：
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-触摸库，但它不支持垂直触摸运动，令人惊讶。任何帮助将是在这一点上pciated大量AP $ P $。 。
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 . . .
推荐答案
这是touchmove的限制目前，我怕有没有真正好的答案。
This is a limitation of touchmove currently, and I'm afraid there's no really good answer.
最好的解决办法是touchmove绑定到父元素，然后计算其子元素是当前触摸点下。它回答了这里<一个一个jQuery上下文href=\"http://stackoverflow.com/questions/12396635/crossing-over-to-new-elements-during-touchmove\">Crossing到touchmove 中的新元素。
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.
这篇关于如何捕捉角指令触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
