Как разрешить конфликт кликов / касаний на Android?

Question

У меня есть событие клика:

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

Это срабатывает на Android, что является проблемой, потому что у меня уже есть jQuery touchstart, touchend, et c события, которые работают нормально на iOS (и тоже запускаются на Android). Когда активны события касания и нажатия, в Android я нажимаю на элемент, и он показывает себя, затем сразу же скрывается, а повторное нажатие ничего не делает. Однако, если я закомментирую код события щелчка, он отлично работает на Android. Проблема в том, что он должен работать на рабочем столе. Я пытался удалить сенсорные события, но затем нажатие не работает на iOS. Также попытался заменить событие щелчка на mousedown и без изменений. Как мне решить эту проблему?

Вот мой полный 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();
  });
};

Answer 1

Я закончил тем, что добавил логическую переменную clicked и установил ее в значение true, когда на мобильном телефоне происходит одно касание, и проверил его в событии щелчка. По сути, события касания запускаются на Android, а событие щелчка - нет, но оно все равно работает на рабочем столе, поскольку события касания там не срабатывают. Обновлено 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();
  });
};