javascript - 使用 mousedown 模拟 Spinner 数字

Question

我制作了一个控件(数字旋转器向上和向下)，以在表格中工作:

JSFIDDLE:http://jsfiddle.net/Leandro1981/wn8vd/1/

我想模拟“鼠标按下，按住鼠标按钮时增量”，但我做不到。我尝试将它与以下功能脚本混合:

JSFIDDLE:http://jsfiddle.net/Leandro1981/kKW85/

但是我没能做到。

我最后一次尝试: http://jsfiddle.net/Leandro1981/S8Zt9/1/

也许是错误的

timeout = setInterval(function () {

但我无法弄清楚。我正在使用 bootstrap 3，所以我无法使用一些 JQuery UI 插件...

如有任何帮助，我们将不胜感激!

如果您有任何问题、评论或任何改进此问题的内容，请在下面发表评论，并对我的英语表示歉意:)

请随意以任何方式使用我的代码/控件。

感谢和亲切的问候

Answer 1

编写一个工厂来设置每个控件，以便获得变量的闭包，现在只需在给定相关元素的情况下使其能够工作即可。为此，您需要

• 监听 up 和 down 节点上的 mousedown 以引发更改
• 启动超时循环以继续进行更改
• 监听 window 上的 mouseup 以确保取消超时循环(您可能还想监听 mouseout/失去焦点)

所以大家一起，

function spinFactory(node, up, down) { // I wrote this vanilla :D
    var spinning, delta;
    window.addEventListener('mouseup', stopSpin);
    function spin() {
        node.value = +node.value + delta;
        spinning = setTimeout(spin, 500);
    }
    function stopSpin() { // maybe also invoke this on mouseout/loss of focus
        window.clearTimeout(spinning);
        delta = 0;
    }
    up.addEventListener('mousedown', function spinUp() {
        delta = 1;
        spin();
    });
    down.addEventListener('mousedown', function spinDown() {
        delta = -1;
        spin();
    });
}
// apply to your control, used a bit of jQuery to make life easier
$('.PNET-spinner').each(function () {
    spinFactory(
        this.getElementsByTagName('input')[0],
        $(this).find('.btn:first-of-type')[0],
        $(this).find('.btn:last-of-type')[0]
    );
});

DEMO