当按钮被按下时触发点击事件

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或其他模块。

- vtortola

---

伪代码建议：为什么不在按下按钮时设置一个变量，在按钮不再被按下时清除它。只要该变量为真，您就可以按增量移动汽车。 - drew_w

我本来想建议类似于这个的东西。 - Fritz

+1 对于这个有趣的演示点赞 :) - pixelbits

我倾向于避免由于不同事件而触发或模拟事件 - 这可能会很快变得非常丑陋。我更喜欢基于不同事件重复使用一个方法或相关方法，就像Aaronias所做的那样，我已经投票支持该答案。 - Stephen P

正确答案需要汽车平稳行驶吗？ - pixelbits

Answer 1

我用mouseup和mousedown事件以及$timeout服务，做了一个简单的模拟解决你的问题的方法。

.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事件的替代方案，你可以直接将angular指令ng-mouseup和ng-mousedown事件绑定到按钮元素上。

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

更新：
添加了moveOnce()函数，用于单击操作。

- Aaronias

---

很好，但如果你只是点击它，它不会移动。 - vtortola

更新以允许单击。 - Aaronias

看起来不错。另一个问题是，如果你在控件内单击但释放掉（mouseup 没有被该指令捕获），汽车就不会停止。 - vtortola

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/

- vtortola