执行按住按钮

感谢您对之前（由主持人删除）的解释和简单的实现，但它不适用于我。 'holdit'函数可以工作，但不是不稳定，可能是因为'holdit'函数中有'onmouseup'，即使我禁用了HTML按钮上的onmouseup，它也不是很稳定。也许最好使用addEventListener- onmousedown-interval函数，但我不知道如何以最简单的方式实现它。这是完整的功能，显示一个按下的按钮，并增加timeSeconds变量一。为了安全起见，数量在限制范围内。请帮忙。执行按住按钮

 HTML: 
    <img id="but4" class="button" src= "//:0" onmousedown="timesecPlus();"onmouseup="timesecPlsUp();"/> 

    JAVASCRIPT: 
    function timesecPlus() { 
    var pmknop = document.getElementById('but5'); 
    pmknop.src = secminBtndwn; //inline Base64 data: button image down (pressed) 

    timeSeconds = ((timeSeconds>wedstrijdperiode.seconden-6)?(timeSeconds):(++timeSeconds)); //You can ++ chase-back the timeseconds until 5 sec's from period start-time 
    displayTime(timeSeconds); 
    }; 

    function timesecPlsUp() { 
    var pmknop = document.getElementById('but5'); 
    pmknop.src = secminBtn; //inline Base64 data: button image up (normal) 
    }; 

    // Things I tried: 
    //holdit(pmknop, function() { ++timeSeconds ; displayTime(timeSeconds);}, 2000, 2); 
    //pmknop = pmknop.addEventListener('mousedown', function() { interval = setInterval(timesecPlus(), 2000); }); 


    function holdit(btn, action, start, speedup) { 
    var t; 

    var repeat = function() { 
    action(); 
    t = setTimeout(repeat, start); 
    start = start/speedup; 
    } 
    btn.onmousedown = function() { 
    repeat(); 
    } 
    btn.onmouseup = function() { 
    clearTimeout(t); 
    } 
    };

来源

2017-06-13 dikkehenk

btn是你想点击的按钮或其他html元素例如：'document.getElementById（'myButton'）;'动作是按下按钮时重复的函数。例如：'function（）{console.log（'我的按钮被点击'）}'。启动并加速我简单 – guest

在'mousedown'上设置超时并在'mouseup'上清除 –

简单实现：

var btn = document.getElementsByClassName('button')[0]; 
holdit(btn, function() { timeSeconds++ ; displayTime(timeSeconds);}, 1000, 2);

实现无holdit：

var btn = document.getElementsByClassName('button')[0]; 
var couterFunc, couter=0; 
btn.addEventListener('mousedown',function(){couterFunc = setInterval(update,1000); update()}) 
btn.addEventListener('mouseup',function(){clearInterval(couterFunc)}) 

/* function that will fire when button press*/ 
function update(){console.log(++couter)};

来源

2017-06-13 14:47:32 guest

我尝试了上面的答案和简单的实现，但'holdit'函数不是很稳定。也许最好是延迟'重复按钮'。 https://edsilverton.wordpress.com/2011/04/11/how-to-make-a-repeating-button-with-delay-in-jquery/上有一个美丽的解决方案，但这是在JQuery中，我不能使用它。希望能够以简单的Javascript使用。我也编辑了完整的代码。 – dikkehenk

现在添加的解决方案没有holdit功能;） – guest

试过这一个（没有holdit函数），但是当我按住按钮什么也没有发生。当我重复点击它需要很大的步骤减少时间Second var。是否有可能将Ed Silverton的'重复按钮延迟'从JQuery转换为纯Javascript。这正是我需要的。谢谢 – dikkehenk

的holdit功能正在采取四个变量。第一个：btn，是按钮ID。这用于确定单击鼠标时执行的操作。

第二个变量是对函数的引用。它被称为回调函数，因为只要你调用holdit，你就会传递一个函数Caaalleed。

最后两个变量只是简单地决定延迟执行重复的时间和延迟时间，以及每次重复会加快多少。

var repeat = function() { 
    action(); 
    t = setTimeout(repeat, start); 
    start = start/speedup; 
}

重复是一个递归函数，它将在'开始'毫秒后调用，并在每次迭代后更频繁地重复。

来源

2017-06-13 14:57:35

执行按住按钮

回答

相关问题