Touchend не работает, даже после вызова e.preventDefault()

Хорошо, я нахожусь в большом затруднительном положении.Touchend не работает, даже после вызова e.preventDefault()

Я наткнулся на ошибку touchhend. После touchmove событие touchhend не работает, независимо от того, что я делаю.

Я попытался добавить preventDefault() в касание. Я также попытался заменить touchend на touchcancel. Все это терпит неудачу. Я прочитал, что это связано с прокруткой устройств с сенсорным экраном, но пока я не нашел никакого рабочего решения.

Я знаю, что это можно решить с помощью JQuery, но я предпочитаю делать это с помощью Vanilla JS, чтобы я мог узнать, что происходит под капотом.

var touchActive = false; 

elem.addEventListener("touchstart", function (event) { 
    touchActive = true; 
}); 
elem.addEventListener("touchend", function (event) { 
    touchActive = false; 
}); 
elem.addEventListener("touchmove", function (event) { 
    if(touchActive){ 
    } 
    else{ 
    } 
});

Так почему же он не работает?

источник

2015-12-26 Asperger

Что значит «не работает»? Если вы помещаете 'console.log' внутри слушателя, ничего не будет регистрироваться? Если он срабатывает, тогда кажется, что вы ожидаете «touchmove», чтобы продолжать стрельбу даже после того, как «touchhend» был. – Zirak

@ Zirak использовал поле оповещения. Ничего не произошло. – Asperger

Мне вроде как тяжело полагать, что при обычных обстоятельствах «коснуться» не срабатывает. Можете ли вы написать [MCVE] (http://stackoverflow.com/help/mcve)? – Zirak

Я пытался воссоздать свой сценарий следующим:

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <style type="text/css"> 
     #foobar { 
      width: 200px; 
      height: 200px; 
      background-color: red; 
      margin: 0 auto; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="foobar"></div> 
     <script type="text/javascript"> 
     var touchActive = false; 

     var elem = document.getElementById("foobar") 

     elem.addEventListener("touchstart", function (event) { 
      console.log("Touch Start"); 
      touchActive = true; 
     }); 
     elem.addEventListener("touchend", function (event) { 
      console.log("Touch End"); 
      touchActive = false; 
     }); 
     elem.addEventListener("touchmove", function (event) { 
      console.log("Touch Active: %s", (touchActive) ? "Yes" : "No") 
      if(touchActive){ 
      } 
      else{ 
      } 
     }); 
     </script> 
    </body> 
</html>

У меня не было никаких проблем с touchstart/touchend с помощью IOS Simulator. Итак, несколько вещей.

Нужно ли отслеживать touchstart/touchhend на мобильном устройстве, когда touchmove отправляется только тогда, когда кто-то активно касается устройства?
Подробнее о проблеме UX - будьте осторожны с предотвращением нажатия на touchmove, так как это предотвратит прокрутку. Блокирование поведения браузера по умолчанию может быть очень проблематичным для всех.
Добавление ведомости консоли, как и я, может помочь вам отладить проблемы, что может быть лучшим способом выяснить, является ли проблема самой отправкой событий или чем-то, что вы сделали на странице (например, перекрывающимися элементами).

источник

2015-12-26 20:12:34 cynicaljoy

Вы можете проверить более продвинутую версию своего предыдущего ответа, который я создал https://jsfiddle.net/4apd6to0/2/. Я добавил окно предупреждения в функции touchhend, и ничего не происходит. Предупреждение не запускается при выпуске. Использование моего телефона Android для тестирования. – Asperger

http://stackoverflow.com/questions/2987706/touchend-event-doesnt-work-on-android?rq=1 – Asperger

Событие touchhend не работает в Targets of Window, проверьте [TouchEnd documentation] (https: //developer.mozilla.org/en-US/docs/Web/Events/touchend). Я также сделал несколько рекомендаций с комментариями [здесь] (https://jsfiddle.net/4apd6to0/3/). – cynicaljoy

Если вы используете Android < 6.0, то вы будете вынуждены использовать как события touchstart, так и touchmove или события завершения, которые не будут возможны, если вы не думаете о интеграции preventDefault. Последний может повлиять на ваш скроллинг так вот мое решение:

https://jsfiddle.net/z9p7uxp2/

var x = document.getElementsByTagName('div')[0]; 

document.getElementsByTagName('div')[0].addEventListener("touchend", function (event) { 
    x.style.background = "black" 
}); 
document.getElementsByTagName('div')[0].addEventListener("touchcancel", function (event) { 
    x.style.background = "black" 
}); 
document.getElementsByTagName('div')[0].addEventListener("touchmove", function (event) { 
    x.style.background = "red" 
});

источник

2015-12-26 21:21:00 Asperger

Touchend не работает, даже после вызова e.preventDefault()

ответ

Смежные вопросы