Javascript 停止touchstart在滚动时执行得太快

我试图找出如何解决滚动时分配给元素的抽头类，但它的效果太快，我需要在实际触摸时延迟一点，而不是在滚动时触摸，这是我的代码，它是如何工作的：

$('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;
    }
});

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

你需要在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);

我是这样做的：

基本上，当你浏览一个页面时，你要点击或滚动。（嗯，还有其他一些事情，比如捏和滑放，你可以在以后再弄清楚）

因此，轻触您的“touchstart”后会出现“touchend” 在滚动条上，您的“touchstart”后面会有一个“touchmove”

使用JQ1.7。。。在其他版本上，可以使用.bind（）

基本上，当发生“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);

---

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

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

---

也许这不是最好的方法，但这对我来说很有效。

嗯，我不知道为什么，但点击的类只有在点击后才被分配，当我按住手指不动时，它不会显示点击的类，而在滚动时会被删除。检查我的编辑，了解我是如何操作的。这就是我期望它的行为方式，除非你触摸屏幕，然后不滚动地将手指从屏幕上拿开，否则不会发生任何事情……如果你想在手指在屏幕上时分配一个类，请在绑定nextEvent（）中的事件之前分配它记住在你的touchmove绑定中移除它。。。事实上，根据您告诉我的，在调用nextEvent（）时，将touchend绑定全部删除并分配类……您可以删除touchmove绑定中的.off（'touchend'），我现在意识到这是多余的……没有它，.off（'touchend'）也不是多余的，touchend仍然会被触发。

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