Если вы спросите переполнение стека «как определить касание с помощью JavaScript», вы получите множество ответов, которые имеют одну общую черту: они не имеют ничего общего с людьми.

По моему далеко не скромному мнению, все эти ответы неверны, но это не вина респондентов. Это вина тех, кто задает вопросы. Зачем вам знать, смотрит ли ваш пользователь на устройство, которое реагирует на прикосновения?

Мы хотим обнаруживать прикосновение человека, а не прикосновение к устройству. Я считаю, что это достаточно важно, чтобы повторить его крупным шрифтом.

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

Нам все равно, выдаст ли браузер пользователя исключение, если мы попробуем document.createEvent ('TouchEvent') или ontouchstart 'in window или window. DocumentTouch && экземпляр документа DocumentTouch или navigator.msMaxTouchPoints ›0 или любое другое до смешного непонятное и ломкое выражение оценивается как истинное, потому что ни одно из них не имеет ничего общего с людьми и их грязными мизинцами. .

Это похоже на то, как если бы вы только что прибыли в аэропорт, а вашего друга, который шел за вами, нет. Вы хотите знать, по крайней мере, они едут за вами. Итак, вы звоните и спрашиваете, привязаны ли они сейчас к стулу. Конечно, часто, когда кто-то ведет машину, он привязан к стулу, но вы можете водить, не будучи привязанным к стулу, и вы можете быть привязанным к стулу. кресло, не находясь в машине (YOLO, amiright?).

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

Как назло, ответить на этот вопрос действительно очень просто:

Для полноты, вот более подробный пример.

Но подождите, я хочу знать до того, как пользователь коснется экрана

Вы не можете *.

ПЛАВНИК

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

Но во мне осталось еще больше разглагольствования, так что я продолжаю…

ПОЧЕМУ?

Почему ты делаешь то, что делаешь? Подумайте о своих потенциальных пользователях в следующих сценариях:

  • с помощью мыши и настольного компьютера
  • с помощью мыши, подключенной к планшету / ноутбуку Android, опираясь на бедро соседа в самолете
  • с помощью крошечной дрянной сенсорной панели ноутбука
  • используя свои липкие толстые пальцы на iPhone 4
  • используя свой тонкий, элегантный палец на iPad 13
  • использование пера на Surface Pro

Какую из этих ситуаций вы хотите обнаруживать и лечить по-другому? Хм?

Вот сценарии желания «обнаруживать прикосновение», с которыми я столкнулся недавно:

Более крупные метки для прикосновений

Итак, вы хотите сделать цели касания красивыми и жирными для людей, которые прикасаются к экрану.

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

Но ладно, вы имеете что-то против людей с болезнью Паркинсона и хотите, чтобы люди, использующие пальцы, получали только удобные цели для щелчков. Вы же не хотите тратить пространство на большие кнопки, если пользователь «касается» экрана пером, верно? Таким образом, возникает вопрос: «насколько точно пользователь может взаимодействовать с экраном».

Вы действительно хотите узнать обхват их сенсорного устройства, не так ли.

Pointer Events спешат на помощь. Это отличный маленький API, который медленно ** внедряется.

Другое поведение при наведении курсора

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

Хм, это как-то связано с тачем? Неа. Это связано с зависанием, верно? Опять же, давайте зададим вопрос получше: «Смогу ли я определить, когда пользователь наводит курсор на мои значки?»

Еще раз мы получили очень простой ответ на наш вопрос:

Взаимодействие с касанием пальцем

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

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

Бонус: это меньше работы!

Любые другие примеры…

Независимо от того, по какой причине вы хотите «обнаружить прикосновение», попробуйте перефразировать вопрос. Быть конкретным. Что, именно, вы хотите знать о ситуации, в которой находится ваш пользователь? Вооружившись лучшим вопросом, вы дадите лучший ответ.

* У меня забавное предчувствие, что некоторые люди будут пытаться определять сенсорные устройства вплоть до того дня, когда Apple выпустит MacBook с сенсорным экраном.

** Моя небольшая привязанность к Google умерла в тот день, когда я прочитал, что они не будут реализовывать рекомендацию PointerEvents w3c, потому что не хотели. Спустя 2 года я рад сообщить, что события указателя работают в Chrome.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на Codeburst на Twitter и 🕸️ Изучите полную веб-разработку .