История, которую должны рассказать touchstart и click

внешний интерфейс WeChat Windows Операция
История, которую должны рассказать touchstart и click

Добро пожаловать в команду веб-разработчиков Futu,несоответствие

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

1. Вопросы

В полдень наконец-то была запущена страница введения платы, которая разрабатывалась несколько дней. Одноклассники по эксплуатации уверенно разослали сообщение о продвижении стандартной страницы зарядки, а потом мы все пошли обедать. Во время обеда я получил отзыв от клиента в группе WeChat: самая критическая часть нашей страницы - нажатие на детали зарядки не отвечает!

页面点击无反应

Затем мы проверили отчеты об ошибках и журналы внешнего интерфейса и не нашли подсказки. Подтвердите среду с клиентом, клиент использует ПК с Windows.

Но как ни странно, я протестировал несколько устройств и до сих пор не могу воспроизвести проблему. Я не могу воспроизвести эту проблему на машине моего коллеги.

2. Отслеживаемость

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

var tap = 'ontouchstart' in window ? 'touchstart' : 'click';
wrap.addEvenListener(tap, function(){
    signUp();
});

Единственное, что немного особенного, это то, что наша страница является адаптивной.Чтобы избежать задержки в 300 мс при нажатии на мобильный терминал, мы сделали суждение перед привязкой, и мобильный терминал привязан.touchstartсобытие, сторона ПК связанаclickмероприятие. Однако этот код также выглядит безвредным для людей и животных и не приводит к тому, что клики не реагируют.

3. Позиционирование

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

На данный момент проблема очень ясна, и проблема, в конечном счете, связана с привязанным событием «щелчок». Мы лишь приблизительно определили, поддерживает ли устройство сенсорные события во время обнаружения, но проигнорировали тот факт, что это могут быть устройства ПК, поддерживающие сенсорные события, и клиенты могут по-прежнему работать, щелкая мышью. На самом деле это отражает то, что мы игнорировали разнообразие пользовательских устройств и делали слишком много предположений о пользовательском устройстве при разработке, что в конечном итоге привело нас к мысли, что это мобильный телефон, а это оказался настоящий ноутбук.

Подводя итог, ключевые моменты таковы:

  • Некоторые устройства ПК имеют сенсорные экраны и поддерживаютtouchstartа такжеclickмероприятие;
  • Пользовательский триггерtouchstartСобытия по умолчанию неизбежно приведут к срабатываниюclickсобытие, но вызываетclickсобытия, которые не обязательно приводят кtouchstartсобытие срабатывает;
  • Когда такое устройство подключено к внешней мыши, оно будет привязано указанным выше методом привязки.touchstartсобытия, но действия мыши могут запускать толькоclick, Привести кtouchstartне срабатывает;

4. Решения

До сих пор причина проблемы была проанализирована, и как с ней бороться, стало проблемой. Суть этого вопроса заключается в том, чтобы определить стратегию использования события «клик» на разных устройствах. Его условно делят на следующие категории:

1. Оба используют событие клика

  • Преимущества: при самоадаптации поддерживаются разные устройства, нет проблем с совместимостью, а стоимость разработки низкая;
  • Недостатки: На мобильном терминале есть задержка в 300мс (хотя коллеги говорят, что вообще ее не ощущают)

2. Определите, является ли устройство мобильным терминалом через UA, а затем подтвердите тип события.

function isMobile() {
    return navigator.userAgent.match(/(blackberry|configuration\/cldc|hp |hp-|htc |htc_|htc-|iemobile|kindle|midp|mmp|motorola|mobile|nokia|opera mini|opera |Googlebot-Mobile|YahooSeeker\/M1A1-R2D2|android|iphone|ipod|mobi|palm|palmos|pocket|portalmmm|ppc;|smartphone|sonyericsson|sqh|spv|symbian|treo|up.browser|up.link|vodafone|windows ce|xda |xda_)/i) ? true : false;
}
 var tap = isMobile() ? 'touchstart' : 'click';
  • Преимущества: при самоадаптации стоимость разработки низкая, а тип события щелчка определяется типом устройства, что может решить большинство проблем, а работа пользователя больше соответствует ожиданиям;
  • Недостатки: Он не может удовлетворить все ситуации.Если пользователь подключает внешнюю мышь к iPad или телефону Android (идентифицированному как мобильное устройство), этот метод не будет работать (PS: Вы должны сделать это, и я не FUCK сказать).

3. Все используют щелчок, решите проблему задержки в 300 миллисекунд с помощью FastClick.

//引入FastClick
var FastClick = require('tool-fastclick');
//页面初始化时调用
new FastClick(document.body);
  • Достоинства: Стоимость разработки невысокая и относительно невысокая, а в 1 и 2 проблем не будет
  • Недостатки: Внедрение дополнительных сторонних библиотек, будут ли у FastClick другие ямки? Это не гарантируется

Примечание:tool-fastclickЭто версия группового форка FastClick, и в настоящее время нет открытого исходного кода. Мы исправили некоторые из существующих проблем, таких как: когда на одной странице есть несколько полей выбора, параметры будут прыгать.

4. Гарантии

На самом деле, лучшее решение — не судить при вязке, аtouchstartа такжеclickсвязать одновременно, но вtouchstartВременно отменить реакцию на последующие клики при срабатывании.

Есть три конкретных реализации:

  1. существуетtouchstartВызывается в ответ на событиеpreventDefault()метод предотвращения последующегоclickтриггер события
  2. существуетtouchstartУстановите некоторые флаги в событии или отменитеclickпривязка событий, чтобыclickКогда событие запускается, логика, которую мы связываем, не будет запущена, и она возобновится через определенный период времени (например, 300–500 мс).
  3. Напрямую ограничивайте обработчик событий, чтобы гарантировать, что в течение периода времени (300–500 мс) обработчик событий будет запущен только один раз.

Конечно, как и выше, у каждого варианта есть свои плюсы и минусы.

Вариант 1 отменяет последующее наблюдениеclickЗапуск событий может привести к некоторым зависимостям, когда несколько привязок событий накладываются друг на друга или сотрудничают несколько людей.clickОшибка в логике события.

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

Короче говоря, нет универсального решения, хе-хе...

наконец

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

Категории