滚动时停止触摸开始执行太快

Question

我正在试图弄清楚如何解决滚动时分配给元素的tapped类,但它生效太快了我需要在实际触摸时稍微延迟它而不是在滚动时触摸,这是我的代码这个怎么运作:

$('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,但是因为它延迟但效果不好但它稍后仍将分配该类.

这是我用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;
    }
});

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

• 演示#1(使用setTimeout).
• 演示#2(没有setTimeout)

您需要在iPhone/iPod/iPad或模拟器上查看它以测试小提琴.

更新:

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);

Answer 1

我是这样做的:

基本上,当您导航页面时,您将点击或滚动.(还有其他东西,比如捏和幻灯片放你以后可以搞清楚)......

所以在点击时你的'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'发生时,我将动作绑定到'touchend'和'touchmove'.

'Touchend'会做任何我想要点击做的事情然后解除绑定'Touchmove'除了解开'touchend'之外基本上什么都不做

这种方式,如果你点击你得到行动,如果你滚动没有发生但滚动..

回应评论:如果我理解你的评论,试试这个:

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);