javascript - 按下按钮时触发点击事件

Question

我正在创建一个将元素向右移动的指令。每次单击时，项目都会向右移动，但我希望只要按住按钮，元素就会移动。

.directive("car", function(){
    return {
        restrict:"A",
        link:function(scope,element,attrs,controller){
            var left=0;
            var car = angular.element(element[0].querySelector('.car'));
            var move = function(e){
                left+=10;
                car[0].style.left = left+"px";
            };
            element.on("click", move);
        }
    };
})

那么我如何才能每半秒检测一次按钮何时被按下并再次调用 move 函数？是否可以流畅的运动？

这里有一个交互式演示:http://jsfiddle.net/vtortola/2m8vD/

我不能为此使用 jQuery，但我可以使用 AngularJS 模块，如 ngTouch 或其他。

Answer 1

我做了一个简单的模型来解决你在 $timeout 服务中使用 mouseup 和 mousedown 事件的问题。

.directive("car", function($timeout){
    return {
        restrict:"A",
        link:function(scope,element,attrs,controller){
            var left=0;
            var car = angular.element(element[0].querySelector('.car'));
            var timeout;
            var moveOnce= function() {
                left+=10;
                car[0].style.left = left+"px";
            };
            var move = function(e){
                $timeout.cancel(timeout);
                timeout = $timeout(function(){
                    moveALittle();
                    move();
                }, 250);
            };
            var stop = function(e){
                $timeout.cancel(timeout);
            };
            element.on("click", moveOnce);
            element.on("mousedown", move);
            element.on("mouseup", stop);

            element.on("$destroy",function(){
                element.off("click",moveOnce);
                element.off("mousedown", move);
                element.off("mouseup", stop);
            });
        }
    };
})

这是一个更新的演示:http://jsfiddle.net/2m8vD/12/

您应该能够轻松地更新超时延迟和像素移动，以使移动尽可能平滑。

作为使用 mouseup 和 mousedown 事件的替代方法，您可以轻松地使用直接绑定(bind)到按钮元素的 Angular Directive(指令) ng-mouseup 和 ng-mousedown 事件。

<button ng-mousedown="move" ng-mouseup="stop">Move</button>

更新:
添加了 moveOnce() 函数以允许单击。