Как отменить действие касания в Mobile Safari?

Question

Скажем, у меня есть кнопка с touchEnd прослушивателем событий. Если я коснусь кнопки, вытащу палец из кнопки и затем отпущу касание, я бы хотел «отменить» событие касания.

Это работает правильно, если я делаю следующее, используя onClick:

buttonElement.addEventListener('click', function (event) {
    if (event.target === this) {
    // Do something
    }
});

Однако, это не работает с "touchEnd", потому что event.target указывает на исходный элемент (в данном случае buttonElement), а не на элемент, где я выпустил touch.

Есть ли лучший общий способ сделать это, кроме как сделать что-то вроде установки флага на "touchMove"? Спасибо!

Answer 1

Используйте сенсорные события: touchstart, touchmove, touchcancel, touchend. См. Apple документы .

Несмотря на это, я не думаю, что попытался бы отменить мероприятие. В случае события я бы проверил местоположение «курсора» (пальца) и, если он находился за пределами области, просто не запустил функцию.

Answer 2

Давным-давно, но я просто хотел добавить свой 2c, поскольку пока нет единого ответа на этот вопрос.

touchCancel на данный момент не очень надежен для мобильных платформ.

См .: http://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/

В качестве альтернативы вы могли бы пойти по пути написания своего собственного типа наложения событий, например, что сделано в Hammer.JS

Таким образом, вы можете определить тип жеста, прежде чем отменить.

Answer 3

Я знаю, что вопрос старый, но я ищу, как сделать то же самое, и я написал код, который работает, и если кому-то понадобится это позже.

Я просто отменяю действие по умолчанию, если касание двигается. Работает довольно неплохо на моем WebApp, и обратная связь намного лучше, чем работа с мышью и mousedown, на мобильном сафари слишком медленная.

var moved=false;

function touchstart(){
    moved=false;
    //highlight button for feedback
}

function touchmove(){
    moved=true;
}

function touchend(){
    //undo-highlight the button

    if(moved) touchcanceled();
    else action();
}

function touchcanceled(){
    //user just flicked the button,
    //probably scrolling the view
}

function action(){
    alert("You triggered me!");
}

* добавить эти функции к соответствующим слушателям событий