Question

我有一个项目列表，当我将手指移动到每个项目上时，我想获得每个项目的id。它适用于鼠标但不适用于触控。我正在使用这个lib：https://github.com/nglar/ngTouch

HTML：

<p class="text-center" > item : {{current}}</p>
<p class="text-center" > state : {{state}}</p>
<div class="row" ng-repeat="item in items" >
    <div ng-style="{background: color}" 
            style="width:100px;height:100px;margin-top:10px;margin-left:auto;margin-right:auto" 
            ng-touchstart="onTouchstart(item)" 
            ng-touchmove="onTouchmove(item)" 
            ng-touchend="onTouchend(item)">
        <p>{{item}}</p>
    </div>
</div>

JS：

$scope.items    = ["1" , "2" , "3"];
$scope.current  = "0";
$scope.state    = "waiting..."
$scope.color    = "red";

$scope.onTouchstart = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch start"
}

$scope.onTouchmove = function(item) {
   $scope.current  = item;
   $scope.state    = "Touch move"
}

$scope.onTouchend   = function(item) {
   $scope.current   = item;
   $scope.state     = "Touch end"
}

如果我在当前元素中工作正常，它会检测到3个动作。但是，例如当我触摸第1项并将我的手指移动到第2项时它没有检测到它，它仍然在第1项上。

Answer 1

您需要根据其他标准（例如位置）获取您已触摸过的元素的范围，例如

e.preventDefault();
var touch = e.originalEvent.changedTouches[0] || e.originalEvent.touches[0] || e.touches[0] || e.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
var element = document.elementFromPoint(x, y);
var scope = angular.element(element).scope();

AngularJS触摸移动多个项目

1 个答案: