3

我正在尝试为 ng-repeat'ed 指令处理 touchmove 事件，无论 touchstart 发生在哪里。在我目前的代码中，如果其中一个元素检测到 touchstart，则所有 touchmove 事件都将由同一个元素处理，而不管触摸移动发生在屏幕上的哪个位置。当我使用 mousemove 执行类似的功能时，每个元素只有在鼠标悬停在相应元素上时才能正确接收 mousemove 事件。

我已经看到与 AngularJS 无关的关于检测 touchmove 事件的 DOM 元素的问题（如何找出 touchmove javascript 事件的实际 event.target？），但如果我这样做，我看不到处理方法在具有正确范围的指令/控制器内。

这是一个基本示例（为方便起见：http: //jsfiddle.net/zMKKv/1/）来比较 mousemove 和 touchmove 之间的行为差​​异：

<html lang="en" ng-app="myApp">

    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    </head>

    <body>
        <div ng-controller="countController">
            <counter ng-repeat="item in somedata" />
        </div>
    </body>

</html>

//-----------

.box {
  width: 150px;
  height: 150px;
  border: solid;
  float: left;
}

//-----------

var app = angular.module('myApp', []);

app.controller("countController", function ($scope) {
    $scope.somedata = [{
        label: "One",
        count: 0
    }, {
        label: "Two",
        count: 0
    }, {
        label: "Three",
        count: 0
    }];

    $scope.increment = function(item) {
      item.count = item.count + 1;
      $scope.$digest();
    };
});

app.directive("counter", function () {
    return {
        restrict: "E",
        template: '<div class="box">{{item.label}}<p>{{item.count}}</div>',
        link: function (scope, element, attrs) {

            element.on('mousemove', function () {
                scope.increment(scope.item);
            });

            element.on('touchmove', function (e) {
                e.preventDefault();
                scope.increment(scope.item);
            });
        }
    };
});
4

0 回答 0