滚动时停止执行太快的 touchstart [英] Stop the touchstart performing too quick when scrolling

问题描述

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

I'm trying to figure out how to solve the tapped class being assigned to the elements when scrolling, but it's taking effect too quick which I need to delay it a bit when it's actually touched instead of touched while scrolling, this is my code of how it works:

$('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 进行试验，但效果不佳，因为它会延迟，但稍后仍会分配类.

When scrolling, it will assign the class to the element when I've barely touched it, I want to prevent this from happening unless it's properly touched (not clicked). Although I tried experimenting with the setTimeout, but that doesn't work well as it delays but it will still assign the class later on.

这就是我用 setTimeout 做到的:

This is how I did it with the 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;
    }
});

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

How can I do this the effective way?

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

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

You need to view it on your iPhone/iPod/iPad or an emulator to test the 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);

推荐答案

我是这样做的:

本质上，当您导航一个页面时，您将点击或滚动.(嗯，还有其他的东西，比如捏合和滑动，你可以稍后弄清楚)...

Essentially, when you navigate a page you're going to tap or scroll. (Well there are other things like pinch and slide put you can figure them out later)...

因此，轻按一下您的touchstart"就会紧跟touchend"在滚动时，您的touchstart"后面会跟着一个touchmove"

So on a tap your 'touchstart' will be followed by a 'touchend' On a scroll your 'touchstart' will be followed by a 'touchmove'

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

Using Jq 1.7... on other versions you can use .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".

Basically, when a 'touchstart' happens, I bind actions to 'touchend' and 'touchmove'.

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

'Touchend' does whatever I would want a tap to do and then unbinds itself 'Touchmove' basically does nothing except unbind 'touchend'

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

This way if you tap you get action, if you scroll nothing happens but scrolling..

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

RESPONSE TO COMMENT: If I understand your comment properly, try this:

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

这篇关于滚动时停止执行太快的 touchstart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！