我想弄清楚如何解决滚动时分配给元素的点击类，但它生效太快，我需要在实际触摸而不是滚动时触摸它时稍微延迟它，这是我的工作原理代码:

$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    var self = $(this);

    self.addClass(self.data('tappable-role'));
}).bind('touchend', function()
{
    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

滚动时，它会在我几乎没有触及它时将类分配给该元素，我想防止这种情况发生，除非它被正确触及(未点击)。虽然我尝试使用 setTimeout 进行试验，但效果不佳，因为它会延迟，但稍后仍会分配类(class)。

这就是我用 setTimeout 做的:

var currentTapped;
$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    clearTimeout(currentTapped);

    var self = $(this);

    var currentTapped = setTimeout(function()
    {
        self.addClass(self.data('tappable-role'));
    }, 60);
}).bind('touchend', function()
{
    clearTimeout(currentTapped);

    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    clearTimeout(currentTapped);

    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

我怎样才能有效地做到这一点？

• Demo #1 (with setTimeout) .
• Demo #2 (with no setTimeout)

您需要在您的 iPhone/iPod/iPad 或模拟器上查看它以测试 fiddle 。

更新:

function nextEvent() 
{
    $(this).on('touchend', function(e)
    {
        var self = $(this);

        self.addClass(self.data('tappable-role')).off('touchend');
    })
    .on('touchmove', function(e)
    {
        var self = $(this);

        self.removeClass(self.data('tappable-role')).off('touchend');
    })
    .click(function()
    {
        var self = $(this),
            goTo = self.data('goto');

        if(typeof goTo !== 'undefined')
        {
            window.location = goTo;
        }
    });
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);

最佳答案

这是我的做法:

本质上，当您浏览页面时，您需要点击或滚动。 (好吧，还有其他的东西，比如捏和滑动，你可以稍后再弄清楚)......

所以在点击你的“touchstart”之后将是一个“touchend” 在滚动条上，您的“touchstart”后跟一个“touchmove”

使用 Jq 1.7...在其他版本上你可以使用 .bind()

function nextEvent() {
    //behaviour for end
    $(this).on('touchend', function(e){
        /* DO STUFF */
        $(this).off('touchend');
    });
    //behaviour for move
    $(this).on('touchmove', function(e){
        $(this).off('touchend');
    });     
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);

基本上，当“touchstart”发生时，我将 Action 绑定(bind)到“touchend”和“touchmove”。

'Touchend' 做任何我想让点击做的事，然后自行解除绑定(bind) 'Touchmove' 除了取消绑定(bind) 'touchend' 基本上什么都不做

这样，如果你点击你就会得到 Action ，如果你滚动除了滚动什么都不会发生..

对评论的回应:如果我正确理解您的评论，请尝试以下操作:

function nextEvent() {
    var self = $(this);
    self.addClass(self.data('tappable-role'))
    //behaviour for move
    $(this).on('touchmove', function(e){
         self.removeClass(self.data('tappable-role'));
    });     
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);

关于javascript - 滚动时停止 touchstart 执行得太快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9842587/