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

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

您需要在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

我是这样做的：

基本上，当您浏览页面时，您将点击或滚动。（还有其他的东西，比如捏和幻灯片，你可以稍后弄清楚）......

因此，点按“触摸启动”后会出现'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);

Answer 2

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

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

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

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

2 个答案: