e.PreventDefault() & e.stopPropogation() not working on tablet & mobile

Question

I have below code in a js file which works fine on all desktop browsers but not on the following tablet & phone

Samsung S4 (chrome & default browser)
iPhone 4S (chrome & safari)

On ipad air/mini (using chrome & safari) it works fine On HTC 1 (using chrome & default) it works fine

Does anyone have any ideas on this? - it seems very much device intermittent which is frustrating

  var clicked = false;
    $('header > div > nav > ul > li').first().find('a').on("click", function (e) {
        if (clicked === false) {
            clicked = true;
            return true;
        } else {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    });

The code is basically disabling an anchor link click event after the first click (the page reloads when user clicks it - set in href) and gets re-enabled when browser renders page again.

The code has grown to what you see above.. i originally just had e.preventDefault(); in the else block which worked fine on desktop testing until i hit the mobile devices.

Have you tried [`.one()`](http://api.jquery.com/one/)? Curious if you have the same issue with that. — gilly3, Jan 15 '15 at 18:10
What's the point of preventDefault and stopPropagation, return false takes care of both — Huangism, Jan 15 '15 at 18:57

score 2 · Answer 1 · answered Jan 15 '15 at 18:16

2

Mobile browsers don't have a click event. You need to use touchstart or touchend.

$(...).on("click touchstart", function (e) {

Should do the trick

answered Jan 15 '15 at 18:16

Kamran224

1,584
7
20
33

e.PreventDefault() & e.stopPropogation() not working on tablet & mobile

1 Answers1

Linked