2363


以下のコードでmousedownとtouchstartが発火しません。 touchmoveも発火したりしなかったりで安定しません。 何が原因でしょうか？
mouseupとtouchendは発火しています。

[code]

    app.controller('Ctrl', ['$scope', '$resource', '$http', '$interval', '$swipe', '$location', function($scope, $resource, $http, $interval, $swipe, $location) {
    　　//省略
        $scope.timerStart = function() {
            console.log("timer start");
            time_timer = $interval(function() {
            }, 1000);
            console.log(time_timer);
        };
        $scope.touchMove = function() {
            $interval.cancel(time_timer);
        };
        $scope.touchEnd = function() {
            console.log("touch end");
            $scope.timerStart();
        };
    $scope.timerStart();
    }])
    .directive('timeClick', function() {
        return {
            controller: ['$scope', '$element', '$attrs', '$http', '$interval',
                function($scope, $element, $attrs, $http, $interval) {
                    var isTap, isTapped;
                    $element.bind('click', function() {
                        if(!isTapped) {
                            return $scope.$apply($attrs['hogeClick']);
                        }
                    });
                    $element.bind('touchstart', function() {
                        console.log('touch start');
                        return isTap = true;
                    });
                    $element.bind('mousedown', function() {
                        console.log('mouse down');
                        return isTap = true;
                    });
                    $element.bind('touchmove', function() {
                        $scope.touchMove();
                        return isTap = false;
                    });
                    return $element.bind('touchend mouseup', function() {
                        $scope.touchEnd();
                        if(isTap) {
                            isTapped = true;
                            return $scope.$apply($attrs['hogeClick'], $element);
                        }
                    });
                }
            ]}
        }
    );
    
[/code]


CC BY-SA 3.0
2014-12-22T00:27:52.473
2343
2019-12-13T18:19:43.950
2014-12-22T05:52:30.557
4371
4371
question
javascript angularjs
AngularJSでmousedownとtouchstartが発火しない


 **この部分はコード貼り付けミスの指摘だけだったので削除しました**

* * *

# 追記 :18:03

ためしてみましたが、イベントは起きているように思います。  
以下がサンプル。

[code]

    var app = angular.module("app", ['ngRoute', 'ngResource', 'ngTouch']);
    
    app.controller('Ctrl', ['$scope', '$resource', '$http', '$interval', '$swipe', '$location', function($scope, $resource, $http, $interval, $swipe, $location) {
        //省略
        $scope.eventtrace = [];
    
        $scope.timerStart = function() {
          console.log("timer start");
          time_timer = $interval(function() {}, 1000);
          console.log(time_timer);
        };
        $scope.touchMove = function() {
          $interval.cancel(time_timer);
        };
        $scope.touchEnd = function() {
          console.log("touch end");
          $scope.timerStart();
        };
        $scope.timerStart();
      }])
      .directive('timeClick', function() {
        return {
          controller: ['$scope', '$element', '$attrs', '$http', '$interval',
            function($scope, $element, $attrs, $http, $interval) {
              var isTap, isTapped;
              $element.bind('click', function() {
                if (!isTapped) {
                  return $scope.$apply($attrs['hogeClick']);
                }
              });
              $element.bind('touchstart', function() {
                console.log('touch start');
                $scope.eventtrace.push("touch start");
                return isTap = true;
              });
              $element.bind('mousedown', function() {
                console.log('mouse down');
                $scope.eventtrace.push("mousedown");
                return isTap = true;
              });
              $element.bind('touchmove', function() {
                $scope.touchMove();
                $scope.eventtrace.push("touch move");
                return isTap = false;
              });
              return $element.bind('touchend mouseup', function() {
                $scope.touchEnd();
                if (isTap) {
                  isTapped = true;
                  return $scope.$apply($attrs['hogeClick'], $element);
                }
              });
            }
          ]
        }
      });
[/code]

[code]

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-touch.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-resource.min.js"></script>
    
    <div ng-app="app">
      <div ng-controller="Ctrl" style="font-size:14pt;">
        <div time-click>[ touch me ]</div>
        <p>
          {{eventtrace}}
        </p>
      </div>
    </div>
[/code]

なお、配列にはmousedownとtouchstartとtouchmoveしかpushしてないのでそれ以外のイベントは画面には出てきません。

Windows上のChromeと、iPhone 6 (iOS 8)のsafariで試しました。  
Windows上ではWebStormのDebugでも見ましたが特にエラーはないです。

touch moveが安定しているかまでは判断できませんが、一応発動はしているように見えました。

ただ、一つだけ気になるとすれば、貼り付けたコードの`//省略`
の手前に全角スペースがあるぐらいですけど、ここはまぁ行ごと元々のコードにはないのでしょうから関係はなさそうですね。


CC BY-SA 4.0
2014-12-22T04:19:10.020
2363
2019-12-13T18:19:43.950
2019-12-13T18:19:43.950
32986
728
2343
answer