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

问题描述

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

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）

• Demo #1 (with setTimeout).
• Demo #2 (with no 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'后会跟'a' 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);

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