javascript 滚动时停止执行太快的 touchstart

Stop the touchstart performing too quick when scrolling

提问by MacMac

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

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:

这就是我用 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?

我怎样才能以有效的方式做到这一点？

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

• 演示 #1（使用 setTimeout）。
• 演示 #2（没有 setTimeout）

You need to view it on your iPhone/iPod/iPad or an emulator to test the fiddle.

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

UPDATE:

更新：

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

回答by Likwid_T

Here's how I did it:

这是我如何做到的：

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

本质上，当您导航一个页面时，您将点击或滚动。（好吧，还有其他事情，例如捏合和滑动，您可以稍后弄清楚）...

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

因此，在轻按时，您的“touchstart”后面将跟着一个“touchend” 在滚动时，您的“touchstart”后面将跟着一个“touchmove”

Using Jq 1.7... on other versions you can use .bind()

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

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

基本上，当“touchstart”发生时，我将动作绑定到“touchend”和“touchmove”。

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

'Touchend' 做任何我想做的事，然后解开它自己'Touchmove' 基本上什么都不做，除了解开'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);

回答by Mithc

Despite this is a relatively old question with a best answer already selected, I want to share my solution. I achieved this by triggering the events just on click.

尽管这是一个相对较旧的问题，已经选择了最佳答案，但我想分享我的解决方案。我通过点击触发事件来实现这一点。

$("div, a, span").on("click", function() {
    // Your code here
}

Maybe is not the best way to do it, but this worked for me.

也许不是最好的方法，但这对我有用。