{"id":6844,"date":"2014-05-01T13:20:41","date_gmt":"2014-05-01T13:20:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/05\/01\/stop-the-touchstart-performing-too-quick-when-scrolling-collection-of-common-programming-errors\/"},"modified":"2014-05-01T13:20:41","modified_gmt":"2014-05-01T13:20:41","slug":"stop-the-touchstart-performing-too-quick-when-scrolling-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/05\/01\/stop-the-touchstart-performing-too-quick-when-scrolling-collection-of-common-programming-errors\/","title":{"rendered":"Stop the touchstart performing too quick when scrolling-Collection of common programming errors"},"content":{"rendered":"

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:<\/p>\n

$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()\n{\n    var self = $(this);\n\n    self.addClass(self.data('tappable-role'));\n}).bind('touchend', function()\n{\n    var self = $(this);\n    self.removeClass(self.data('tappable-role'));\n}).bind('click', function()\n{\n    var self = $(this),\n        goTo = self.data('goto');\n\n    if(typeof goTo !== 'undefined')\n    {\n        window.location = goTo;\n    }\n});\n<\/code><\/pre>\n
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.<\/p>\n
This is how I did it with the setTimeout:<\/p>\n
var currentTapped;\n$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()\n{\n    clearTimeout(currentTapped);\n\n    var self = $(this);\n\n    var currentTapped = setTimeout(function()\n    {\n        self.addClass(self.data('tappable-role'));\n    }, 60);\n}).bind('touchend', function()\n{\n    clearTimeout(currentTapped);\n\n    var self = $(this);\n    self.removeClass(self.data('tappable-role'));\n}).bind('click', function()\n{\n    clearTimeout(currentTapped);\n\n    var self = $(this),\n        goTo = self.data('goto');\n\n    if(typeof goTo !== 'undefined')\n    {\n        window.location = goTo;\n    }\n});\n<\/code><\/pre>\n
How can I do this the effective way?<\/p>\n
    \n
  • Demo #1 (with setTimeout).<\/li>\n
  • Demo #2 (with no setTimeout)<\/li>\n<\/ul>\n
    You need to view it on your iPhone\/iPod\/iPad or an emulator to test the fiddle.<\/p>\n
    UPDATE:<\/strong><\/p>\n
    function nextEvent() \n{\n    $(this).on('touchend', function(e)\n    {\n        var self = $(this);\n\n        self.addClass(self.data('tappable-role')).off('touchend');\n    })\n    .on('touchmove', function(e)\n    {\n        var self = $(this);\n\n        self.removeClass(self.data('tappable-role')).off('touchend');\n    })\n    .click(function()\n    {\n        var self = $(this),\n            goTo = self.data('goto');\n\n        if(typeof goTo !== 'undefined')\n        {\n            window.location = goTo;\n        }\n    });\n}\n\n$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6844","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6844"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6844\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}