Question

我有一个在Kiosk模式下在Chrome中运行的Angular 1 / Javascript程序。此应用程序仅与触摸屏一起使用。

我们有一组控制HTTP摄像头，放大/缩小和调整角度的按钮。问题是当用户点击按钮时，例如缩放，他在向下拖动（远离按钮）时保持触摸。

因此，即使用户不再按下按钮，相机也会继续转动/变焦。它没有检测到用户离开按钮。

我想通过检测他的手指何时离开按钮，然后停止命令来捕捉这种行为。

我已经提出以下代码来检查用户是否在按下按钮的同时移动他/她的手指，如果用户移动很多，则移动停止。

指令：

    app.directive("ngTouchmove", function () {
    return {
        controller: function ($scope, $element, $attrs) {
            $element.bind('touchstart', onTouchStart);

            function onTouchStart(event) {
                event.preventDefault();
                $element.bind('touchmove', onTouchMove);
                $element.bind('touchend', onTouchEnd);
            };

            function onTouchMove(event) {
                var method = $element.attr('ng-touchmove');
                $scope.$event = event;
                $scope.$apply(method);
            };

            function onTouchEnd(event) {
                event.preventDefault();
                $element.unbind('touchmove', onTouchMove);
                $element.unbind('touchend', onTouchEnd);
            };
        }
    };
});

控制器：

var amountMoved = 0;
$scope.onTouchmove = function(source, command) {
    amountMoved ++;
    if (amountMoved > 10) {
        amountMoved = 0;
        $scope.mouseUp(source, command)
    }
}

此解决方案的问题在于，当您在触摸按钮时稍微重新排列手指时，命令会停止。我可以将amountMoved支票号设置得更高，但这会降低其准确性。

我怎么能解决这个问题？我应该制定触摸假指令吗？如果是这样，那么实施这个可能是一个好的开始吗？

用于触摸屏的Angular 1 ngMouseleave

0 个答案: