js中如何实现鼠标长按连续触发？

MiIIer

19452966

发布于
2016-12-05

现在有一个需求，长按'+'或者'-'按钮，数值不停增加如下图:

而我在使用onMouseDown的时候，发现事件只会被触发一次，不能实现持续增加，请问要如何实现这个需求？

javascript

阅读 13k

4 个回答

得票最新

陈小亮Chan

817138

发布于
2016-12-05

✓ 已被采纳

mousedown的时候启动一个setInterval。200ms把宽度增加+1，mouseup的时候cancel掉。就这么简单。

northW

231

发布于
2016-12-05

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button id="button">0</button>
<script type="text/javascript">
    var c = 0;
    var tid;
    var btn = window.document.getElementById("button");
    btn.onclick = function(e){
        c++;
            btn.innerHTML = c;
    };
    btn.onmousedown = function(e){
        tid = setInterval(function(){
            c++;
            btn.innerHTML = c;
        },500);
    };
    btn.onmouseup = function(e){
        clearInterval(tid);
    }
    btn.onmouseout = function(e){
        clearInterval(tid);
    }
</script>
</body>
</html>