How to resolve click/touch conflict on Android?

Question

I have a click event:

  $('#ddTestOverlay').on('click', function () {
    $('#ddTestOverlay').toggle();
  });

This is triggered on Android, which is a problem, because I already have jQuery touchstart, touchend, etc events that are working fine on iOS (and are triggering on Android too). When both touch and click events are active, on Android, I tap on the element and it shows itself then hides immediately, and tapping again does nothing. However, if I comment out the click event code, it works fine on Android. Problem is, it needs to be working on desktop. I've tried removing the touch events, but then the tap doesn't work on iOS. Also tried substituting the click event for mousedown and no change. How do I resolve this problem?

Here's my full jQuery:

function handleOverlayInteraction() {
  $('.mosaic-wrapper').on('mouseenter', function () {
    $('#ddTestOverlay').show();
  }).on('mouseleave', function () {
    $('#ddTestOverlay').hide();
  });

  var dragged = false;
  $('.mosaic-wrapper').on('touchstart', function () {
    dragging = false;
  });

  $('.mosaic-wrapper').on('touchmove', function () {
    dragging = true;
  });

  $('.mosaic-wrapper').on('touchend', function () {
    if (dragging) {
      return;
    }

    // Mobile single tap only
    $('#ddTestOverlay').toggle();
  });

  $('#ddTestOverlay').on('click', function () {
    $('#ddTestOverlay').toggle();
  });
};

jquery is not exactly my strong suit, but you could look into identifying what the device is and only performing functions in for certain devices. https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device — zgc7009, Apr 16 '20 at 23:47

score 0 · Accepted Answer · answered Apr 17 '20 at 00:12

I ended up adding a clicked boolean variable and setting it to true when the single tap occurs on mobile, and checking it in the click event. Basically, the touch events fire on Android and the click event doesn't, but it still works on desktop because the touch events do not trigger there. Updated jQuery:

function handleOverlayInteraction() {
  $('.mosaic-wrapper').on('mouseenter', function () {
    $('#ddTestOverlay').show();
  }).on('mouseleave', function () {
    $('#ddTestOverlay').hide();
  });

  var dragged = false;
  var clicked = false;
  $('.mosaic-wrapper').on('touchstart', function () {
    dragging = false;
  });

  $('.mosaic-wrapper').on('touchmove', function () {
    dragging = true;
  });

  $('.mosaic-wrapper').on('touchend', function (e) {
    if (dragging) {
      return;
    }

    // Mobile single tap only
    clicked = true;
    $('#ddTestOverlay').toggle();
  });

  $('#ddTestOverlay').on('click', function (e) {
    if (clicked) return;
    $('#ddTestOverlay').toggle();
  });
};

How to resolve click/touch conflict on Android?

1 Answers1