【问题标题】:HTML5: Recurring event on hold - on mobileHTML5:定期举行的活动 - 在移动设备上
【发布时间】:2017-06-25 11:23:20
【问题描述】:

我想制作一个按钮,在您按住按钮时增加计数器。

这是我想要的,但它不适用于移动设备。 http://jsfiddle.net/8FmRd/

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
    timeout = setInterval(function(){
        clicker.text(count++);
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

如果有人知道如何制作这样的东西,但对于触摸屏,将不胜感激!

【问题讨论】:

    标签: javascript android html touch


    【解决方案1】:

    试试这个。

    var timeout, clicker = $('#clicker');
    var count = 0;
    
    
    document.getElementById("clicker").addEventListener('touchstart', function(e) {
      timeout = setInterval(function() {
        clicker.text(count++);
      }, 500);
      return false;
    });
    
    clicker.mousedown(function() {
      timeout = setInterval(function() {
        clicker.text(count++);
      }, 500);
    
      return false;
    });
    
    $(document).mouseup(function() {
      clearInterval(timeout);
      return false;
    });
    
    document.body.addEventListener('touchend', function(e) {
      clearInterval(timeout);
      return false;
    });
    #clicker {
        width: 50px;
        height: 50px;
        margin: 20px;
        
        background: orange;
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }
    <div id="clicker"></div>

    【讨论】:

    • 谢谢,但是使用此代码,一旦您点击按钮,计数器就会无限计数。
    • 当我按住按钮时它现在开始,但它并没有停止计数。 drive.google.com/drive/folders/… 以防你想亲眼看看。
    • 它已经在小提琴中工作,无需您的编辑。关键是它在触摸屏(手机)上不起作用。
    • @SJacobs 我已经更新了我的答案。有用。参考请参阅fiddle
    • 现在在您按住按钮时开始计数,但在您触摸按钮外的任何位置之前它不会停止。我需要的只是当你停止按下按钮时它会停止。不过,我感谢您的帮助!
    猜你喜欢
    • 2012-02-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多