1

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.

2
  • Have you tried .one()? Curious if you have the same issue with that.
    – gilly3
    Jan 15, 2015 at 18:10
  • What's the point of preventDefault and stopPropagation, return false takes care of both
    – Huangism
    Jan 15, 2015 at 18:57

1 Answer 1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.