Есть ли способ TouchEndInside в мобильном сафари? - PullRequest
Новая
       20

Есть ли способ TouchEndInside в мобильном сафари?

2 голосов
/ 27 декабря 2010

Я пытаюсь определить, выполняет ли пользователь касание в мобильном сафари для веб-приложения iPhone.До сих пор я был неудачным.Событие touchend срабатывает независимо от того, где происходит событие касания, и я не могу понять, что цель изменилась в аргументе события.

Может кто-нибудь указать мне правильное направление назахватить событие touchendinside (против touchendoutside), используя javascript? 

$('a.arrow').bind('touchend',function(e) {
        console.log($(e.srcElement)); //both of these always return the same element
        console.log($(e.toElement)); //both of these always return the same element
    });

Ответы [ 2 ]

4 голосов
/ 09 января 2011

Я нашел статью , опубликованную Google, показывающую, как определить, находится ли кассовый аппарат внутри, а не снаружи. Основной трюк:

  • Имейте 3 обработчика: один на сенсорном пуске, сенсорное движение и касание.
    1. сенсорный запуск: сохранение (x, y) координат касания
    2. touchmove: убедитесь, что касание не сдвинулось на определенное количество пикселей по любой оси, и если это так, прекратите отслеживание касания.
    3. touchend: если вы все еще отслеживаете его, он «внутри»; если нет, то это «снаружи».

Вы всегда можете получить более сложную информацию, используя фактические границы цели и т. Д., Но для большинства приложений этого, вероятно, достаточно.

0 голосов
/ 16 мая 2013

@ Крис Р. Доннелли на месте.Вам необходимо использовать комбинацию трех событий js (touchstart, touchmove и touchend) для эффективного создания собственного распознавателя жестов.

Подход Google , вероятно, являетсядействительно хороший путь.Я еще не пробовал.

Вот базовый пример слушателя «touch up inside» для Mobile Safari, который прослушивает только js-события на целевом элементе.Он будет игнорировать любое касание, возникающее вне элемента, любое касание, которое заканчивается снаружи элемента, и любое касание, которое перетаскивается внутри элемента.Это не обрабатывает клики (вы должны добавить это, если вы тоже поддерживаете рабочий стол). 

<script type="text/javascript">
  document.getElementById("yourElementId").addEventListener('touchstart', touchstart, false);
  document.getElementById("yourElementId").addEventListener('touchmove', touchmove, false);
  document.getElementById("yourElementId").addEventListener('touchend', touchend, false);
  var touchStartCoord = null;
  function touchstart (e) {
    touchStartCoord = {x: e.touches[0].pageX, y: e.touches[0].pageY};
    return true;
  };
  function touchmove (e) {
    if (touchStartCoord != null)
    {
      var tolerance = 10.0;
      if (Math.abs(e.touches[0].pageX-touchStartCoord.x) > tolerance || Math.abs(e.touches[0].pageY-touchStartCoord.y) > tolerance)
      {
        // moved too far, cancels event for this touch
        touchStartCoord = null;
      }
    }
    return true;
  };
  function touchend (e) {
    if (touchStartCoord != null)
    {
      window.location.href = "http://geospike.com/";
      return true;
    }
  };
</script>

Если вы хотите поддерживать несколько элементов, вы можете обернуть его многократно.

...