當滾動時停止touchstart執行得太快

我想弄清楚如何解決在滾動時分配給元素的挖掘類，但它生效太快了，當它實際上被觸摸時我需要稍微延遲它而不是在滾動感動，這是我的它是如何工作的代碼：當滾動時停止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還是一個模擬器來測試小提琴。

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

來源

2012-03-23 MacMac

我是這樣做的：

從本質上講，當你瀏覽你要去挖掘或滾動頁面。（當然還有其他的東西像捏和幻燈片放後，你可以計算出來）...

所以上的點按您的「touchstart」之後，將一個「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);

來源

2012-03-23 20:04:24

嗯，我不知道爲什麼，但螺紋類只有它被點擊後，被分配，當我拿着我的手指下移動，它不會當它應該和滾動時去除顯示竊聽類。檢查我的編輯方式。 – MacMac 2012-03-23 20:26:45

這就是我期望它行爲的方式，除非您觸摸屏幕，然後將手指從屏幕上移開而不滾動，否則不會發生任何事情......如果您想在手指在屏幕上時分配類，在nextEvent事件（）只記得從你告訴我該怎麼得到產品總數擺脫touchend綁定在你的touchmove綁定刪除它。其實，一旦nextEvent（）被調用指定類... – 2012-03-23 20:40:07

啊，優秀。您的解決方案奏效謝謝。 – MacMac 2012-03-23 21:10:21

儘管這是一個相對較老的問題了已選擇最佳答案，我想分享我的解決方案。我通過點擊觸發事件來實現這一點。

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

也許是不這樣做的最佳方式，但是這爲我工作。

來源

2016-04-23 18:00:28 Mithc

當滾動時停止touchstart執行得太快

回答

相關問題