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，但我可能会使用像ngTouch等AngularJS模块。

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事件的替代方法，您可以轻松地使用角度指令ng-mouseup和ng-mousedown事件直接绑定到按钮元素。

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

更新：
添加了moveOnce（）函数以允许单击。

Answer 2

@Aaronias让我走上了正确的道路，对他赞不绝口。

当按住按钮时我设法实现平滑移动，当鼠标移出时我设法取消。关键是删除CSS转换，开始执行小步骤的间隔，并在mouseout或mouseup上取消该间隔。

var move = function(e){
    if(interval)
        return;

    step(e);
    mustStop = false;

    interval = $interval(function(){
        step(e);
        if(mustStop){
            $interval.cancel(interval);
            mustStop = false;
            interval = null;
        }
    }, 10);
};

var stop = function(){ mustStop= true;};

right.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

left.on("mousedown", move)
    .on("mouseup", stop)
    .on("mouseout", stop);

这是它运作的示例的版本：http://jsfiddle.net/vtortola/2m8vD/22/

按下按钮时触发单击事件

2 个答案: