执行按住按钮
感谢您对之前(由主持人删除)的解释和简单的实现,但它不适用于我。 '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);
}
};
简单实现:
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)};
我尝试了上面的答案和简单的实现,但'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;
}
重复是一个递归函数,它将在'开始'毫秒后调用,并在每次迭代后更频繁地重复。
btn是你想点击的按钮或其他html元素例如:'document.getElementById('myButton');'动作是按下按钮时重复的函数。例如:'function(){console.log('我的按钮被点击')}'。启动并加速我简单 – guest
在'mousedown'上设置超时并在'mouseup'上清除 –