Подробное объяснение событий мобильного терминала touchstart, touchmove, touchend

внешний интерфейс JavaScript Android SEO

Я полагаю, что вы уже знакомы с событиями JS на стороне ПК. Такие события, как щелчок\наведение мыши, могут удовлетворить потребности во взаимодействии. Хотя события на мобильном терминале могут быть слегка затронуты, вы можете не знать конкретного использования, разницы.

Предисловие:

Эти события впервые появились в IOS Safari. Чтобы донести до разработчиков какую-то особую информацию, эти события были добавлены. С добавлением webkit в Android такие проприетарные события постепенно стали стандартом де-факто. содержание спецификации Touch Event.

В частности, это следующие события:

  • touchstart Срабатывает, когда палец касается экрана, даже если палец уже находится на экране.
  • touchmove срабатывает, когда палец проводит по экрану.
  • touchend Срабатывает, когда палец убирается с экрана.

Как определяются события:

Он примерно разделен на события DOM0 и события DOM2.

Событие DMO0 — это традиционная форма прямой установки события как свойства:

 div1.ontouchstart = function(){
     alert(1);
 }

Для событий DOM2 addEventListener используется для привязки обработчиков событий:

  div1.addEventListener("touchstart",function(){
      alert(1);
  });

В большинстве случаев первый метод не рекомендуется.Этот метод хорош или плох при использовании на мобильном терминале, и использовать его не рекомендуется.

События на ПК на 300 мс медленнее, чем события на мобильных устройствах:

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

        var div = document.querySelector("#div");
        div.onclick = function(){
            console.log("click!");
        }
        div.ontouchstart = function(){
            console.log("touchstart!");
        }

Вы можете видеть, что для каждого щелчка touchstart всегда запускается перед событием щелчка. Конечно, для этой задачи есть специальные библиотеки, решающие проблему задержки. Такие как:Fastclick

Проблема с кликами:

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

比如:
有一个遮罩层A元素，他的底下有一个链接元素B.
当这个遮罩层点击之后希望遮罩层消失，真实的状况是这时候点击遮罩层不见的同时会跳转页面。

почему это? Как упоминалось ранее, touchstart будет выполняться перед событием клика, когда вышеупомянутый слой маски исчезнет в течение 300 мс, тогда сработает элемент с характеристиками щелчка под ним. Вы можете смоделировать приведенный выше пример в частном порядке.

Как решить?

Элементы, базовые элементы которых не используют атрибут click

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

Этот метод не рекомендуется, поскольку тег a может предоставить некоторую информацию для SEO.

Блокировать все клики:

document.addEventListener("click",function(ev){
 ev.preventDefault();
})
document.addEventListener("touchstart",function(ev){
 ev.preventDefault();
})

В это время интерактивное поведение элементов с характеристиками щелчка будет недействительным. Конечно, интерактивное поведение можно перезапустить в соответствии с фактическими потребностями.

код показывает, как показано ниже:

a.ontouchstart = function(){
        window.location = this.href;
 }

Это учитывает как SEO, так и позволяет безопасно использовать события кликов. Конечно, у него есть и другие преимущества.

  • Возможность предотвратить масштабирование IOS10: Для ISO10 настройка метатега для отключения масштабирования не работает, приведенный выше код предотвращает поведение браузера по умолчанию.
  • Предотвращение эффекта отскока в IOS10
  • удалить системную полосу прокрутки
  • Запретить длительное нажатие для выбора текста и изображений: конечно, это также предотвращает получение фокуса ввода, что требует добавления отдельного поведения для ввода, чтобы предотвратить всплытие. Это предотвращает всплытие событий к элементу верхнего уровня и препятствует взаимодействию.
input.ontouchstart = function(ev){
      ev.stopPropagation();
}

Мобильный объект события:

Обратите внимание, что у каждого обработчика событий в предыдущем примере есть параметр evt, который является связанной информацией о текущем касании, через такой объект можно получить координаты текущего касания и количество коснувшихся пальцев и т. д. Наиболее важным из них является список пальцев.

touches:当前位于屏幕下的手指列表信息
targetTouches: 当前位于当前元素下的手指列表信息
changedTouches: 当前涉及到当前事件的手指列表

Эти три списка пальцев хранятся в объекте события касания, и список здесь будет обновляться после каждого касания.

var div = document.querySelector("#div");
         div.ontouchmove = function(evt){
            this.innerHTML = `
                touches-length:${evt.touches.length}
                targetTouches-length:${evt.targetTouches.length}
                changedTouches-length:${evt.changedTouches.length}
                `
            console.log(evt);
        }

В приведенном выше примере содержимое DIV будет обновляться после перемещения пальца по DIV. Показывает количество касаний пальцами, targetTouches,changedTouches соответственно

Спасибо за прочтение! Надеемся добиться прогресса вместе!

Категории