3

touchstart が発生した場所に関係なく、ng-repeat ディレクティブの touchmove イベントを処理しようとしています。現在のコードでは、要素の 1 つが touchstart を検出すると、画面上のどこで touchmove が発生したかに関係なく、すべての touchmove イベントが同じ要素によって処理されます。mousemove で同様の機能を実行すると、各要素は、マウスがそれぞれの要素の上にある場合にのみ、mousemove イベントを正しく受け取ります。

touchmove イベントの DOM 要素の検出に関する AngularJS とは関係のない質問を見てきました ( touchmove javascript イベントの実際の event.target を見つけるにはどうすればよいですか? ) 。正しいスコープを持つディレクティブ/コントローラー内。

mousemove と touchmove の動作の違いを比較するための基本的な例 (便宜上: http://jsfiddle.net/zMKKv/1/ ) を次に示します。

<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