Jquery Tap and Touch so long action

Question

I have a tabber, when i tap on button with

$(document).on('click touchstart', 'element', function() { /*Some code*/ });

the tabber switches, if under finger area has button or link - it's activates.

How to avoid this effect?

Thanks in advance!

Something like this: jsfiddle.net/r99headp (in Google Chrome activated device toolbar)

Which effect are you trying to avoid? "page moves to area under finger" or "if there are button or link - it's activates"? — gforce301, May 08 '17 at 14:18
I apologize, forgot to say that I have a tabber, I click on a button on one tab, the tabber switches, and I hit the button on the second tab. Both of them. — Dan, May 08 '17 at 14:26
Try changing your click handler to this: `$(document).on('click touchstart', 'element', function(e) { e.preventDefault(); /*Some code*/ });` — gforce301, May 08 '17 at 14:37
I have 2 tabs, i click on button at first tab, after that i get second tab, and if second tab has button or link - they activates. Sorry for my bad explanation — Dan, May 08 '17 at 14:43
At this point without example code I can't visualize this enough to help. — gforce301, May 08 '17 at 14:46
Something like this: https://jsfiddle.net/r99headp/ (in Google Chrome activated device toolbar) — Dan, May 08 '17 at 15:10

score 2 · Accepted Answer · edited May 23 '17 at 12:18

As far as I can tell, I think this has to do with passive event listeners and event propagation on the touchstart event. When I tried to add prevenDefault to your even handler like so:

$(function() {
    $(document).on('click touchstart', '.js-next', function(e){
        e.preventDefault();
        $('.js-tab').click();
    });
});

I get this warning in chrome:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

Following that link you'll see this in the docs:

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored).

Chasing that down I came across this answer on SO: https://stackoverflow.com/a/39187679/1819684 Which says that jQuery has an ongoing issue with passing options to addEventListener. Meaning that at the moment you can't do it with jQuery and set passive: false. So I reworked your example code to this: https://jsfiddle.net/w9h4an81/

$(function() {
    document.addEventListener('touchstart', function(e) {
        e.preventDefault();
        $('.js-tab').click();
    }, {passive: false});

    $(document).on('click', '.js-next', function(e){
        $('.js-tab').click();
    });
});

To do it only with jQuery you have to do something like this: https://jsfiddle.net/6377wdhc/ You can't listen on the document.

$(function() {
    $('.js-next').on('click touchstart', function(e){
        e.preventDefault();
        $('.js-tab').click();
    });
});

Jquery Tap and Touch so long action

1 Answers1