Одним из способов использования JavaScript является скрытие или отображение содержимого в зависимости от поведения пользователя. Например, пользователь может выбрать параметр при заполнении онлайн-формы, и его выбор может привести к появлению других связанных полей формы. На этом уроке вы будете использовать CSS и Javascript для отображения и скрытия созданных вами часов.
В современном Интернете принято скрывать контент от пользователей до тех пор, пока он не понадобится. В этом уроке вы скроете свои часы, а затем добавите ссылку, по которой при нажатии будут отображаться часы.
Теперь обновите страницу в браузере. Что случилось? Если все работает правильно, ваши часы больше не должны быть видны. Это один из нескольких способов скрыть контент с помощью CSS. Чтобы снова сделать элемент видимым, вы измените это свойство на:
Однако в данном случае мы хотим сделать элемент видимым только в том случае, если пользователь специально запрашивает его. Поэтому нам придется динамически изменять стиль с помощью JavaScript, запускаемого событием onclick.
Обратите внимание, что эта кнопка по сути такая же, как и кнопка, которую вы создали в Уроке 1 для отображения оповещения. Хотя есть одно важное отличие. Эта кнопка имеет атрибут id. Таким образом, вы можете легко получить к нему доступ с помощью JavaScript (сейчас вы поймете, почему).
Теперь, когда у вас есть кнопка, которая при нажатии вызывает функцию toggleClock(), вам нужно создать функцию toggleClock(). Вот эта функция — просто добавьте ее в существующий раздел сценария в заголовке вашей веб-страницы:
В этой новой функции toggleClock() вы используете JavaScript для извлечения элемента часов, получения текущего значения его стиля отображения, а затем проверки его. Если дисплей в настоящее время настроен на «блок», часы видны, поэтому вы меняете отображение на «нет», что скрывает часы. Если часы уже скрыты, вы меняете отображение на «блок», чтобы снова сделать их видимыми. В то время как вы переключаете отображение часов туда и обратно с «блокировать» на «нет», вы также меняете текст (innerHTML) на кнопке часов, чтобы она чередовалась между «Показать часы» и «Скрыть часы», в зависимости от в текущем состоянии отображения часов.
Протестируйте свою веб-страницу и убедитесь, что вы можете показывать и скрывать часы с помощью новой кнопки. Также убедитесь, что текст кнопки меняется с «Показать часы» на «Скрыть часы». Поделитесь своей веб-страницей со своим инструктором. Если все хорошо, переходите к следующему уроку.
Я заметил, что браузеры по-разному обрабатывают нажатие на . Некоторые браузеры предпочитают фокусироваться на кнопке. Некоторые браузеры этого не делают.
В этой статье я хочу показать вам мой тест и результаты. Затем я хочу поговорить о способе преодоления этих несоответствий.
Тест прост. Мы проверяем, что происходит, когда мы нажимаем на файл . В частности, мы хотим знать, если:
Вот вам Codepen, если вы хотите пройти тесты.
Мы можем проверить фокусировку визуально. Если кнопка находится в фокусе, вокруг кнопки должно появиться визуальное свечение по умолчанию.
Мы также можем проверить фокус программно. В JavaScript вы можете получить сфокусированный элемент с помощью document.activeElement. Когда мы нажимаем кнопку, мы можем зарегистрировать сфокусированный элемент.
Примечание. Если вы используете Chrome, вы можете использовать инструмент Live Expression (поэтому нет необходимости регистрировать document.activeElement ).
Здесь мы можем добавить в документ прослушиватель событий нажатия клавиши. Здесь мы хотим зарегистрировать, какой элемент вызвал событие. Мы можем указать элемент с помощью event.target .
После нажатия кнопки Tab переходит к следующему элементу, на который можно сфокусироваться? Если он переходит к следующему находящемуся в фокусе элементу, этот элемент должен получить контур фокуса.
Аналогичным образом, Shift + Tab переходит к предыдущему элементу, на который можно сфокусироваться? Если он переходит к предыдущему элементу, находящемуся в фокусе, этот элемент также должен получить контур фокуса.
Я не записал документ document.activeElement, потому что свечения фокуса достаточно.
При нажатии кнопки в Safari (12.1.1) кнопка не получает фокус. Вместо этого документ получает фокус. Мы знаем это, потому что:
После получения фокуса любое дальнейшее нажатие клавиши происходит из .
Переход к следующему элементу работает должным образом. Следующий элемент получает фокус.
Shift + Tab работает не так, как я ожидал. Я ожидаю, что фокус получит предыдущий элемент, но вместо этого он получает фокус.
При нажатии кнопки в Firefox (Nightly 70.0a1) кнопка не получает фокус. Вместо этого документ получает фокус.
Любое дальнейшее нажатие клавиши происходит из .
Вкладка не работает должным образом. Когда вы нажимаете Tab , Firefox фокусируется на первом элементе документа.
Shift + Tab — это забавно. Если это первое, на что вы нажали, Firefox фокусируется на последнем элементе в документе, на котором можно сделать фокус. Если вы сфокусировались на элементе до того, как нажали кнопку, Firefox сфокусируется на этом элементе.
Проблема с Firefox и кнопками восходит к Firefox 63 (как минимум). В MDN есть раздел на эту тему:
При нажатии кнопки в Firefox (Quantum 68.0.1, версия для Windows) кнопка получает фокус, но свечение фокуса не отображается.
Дальнейшее нажатие клавиши начинается с .
Вкладка работает должным образом. Следующий элемент получает фокус.
Shift + Tab работает должным образом. Предыдущий элемент получает фокус.
Когда вы нажимаете кнопку в Chrome (Canary 78.0), кнопка получает фокус. Эта реализация отличается от Safari и Firefox.
Следующее нажатие клавиши происходит от . Это ожидаемо, так как это сфокусированный элемент.
Вкладка работает должным образом. Следующий элемент получает фокус.
Shift + Tab работает должным образом. Предыдущий элемент получает фокус.
Когда вы нажимаете кнопку в Chrome (Chrome 75.0), кнопка получает фокус.
Следующее нажатие клавиши происходит от .
Вкладка работает должным образом. Следующий элемент получает фокус.
Shift + Tab работает должным образом. Предыдущий элемент получает фокус.
Когда вы нажимаете кнопку в Edge (Edge 17), кнопка получает фокус, но кольцо фокусировки не появляется.
Следующее нажатие клавиши происходит от .
Вкладка работает должным образом. Следующий элемент получает фокус.
Shift + Tab работает должным образом. Предыдущий элемент получает фокус.
Вот результаты в виде таблицы.
| Тест | Safari | Firefox () | Firefox (⊞) | Chrome () | Chrome (⊞) | Край (⊞) |
|---|
| Фокусированный элемент< /td> | (но без свечения фокуса) | (но без свечения фокуса) |
| Следующее нажатие клавиши от: |
| Вкладка переходит к: | Следующему элементу | Первому элементу в документе | Следующему элементу | Следующему элементу< /td> | Следующий элемент | Следующий элемент |
| Shift + Tab переходит к: | Предыдущий элемент (если есть) ) | Предыдущий элемент | Предыдущий элемент | Предыдущий элемент | Предыдущий элемент |
< /таблица>
- Firefox на Mac просто странный. Все кажется неправильным.
- Некоторые браузеры не фокусируются на кнопке при нажатии.
- Некоторые браузеры не подсвечивают кнопку при нажатии.
В спецификации HTML не указано, что браузеры должны делать после того, как пользователь нажмет кнопку. Таким образом, обозреватели не виноваты в непоследовательном поведении.
Вот возможное решение
Я думаю, что реализация Chrome (как для Mac, так и для Windows) имеет наибольший смысл.
- Когда вы нажимаете кнопку, фокус должен быть на кнопке.
- Кнопка должна подсвечиваться.
- Когда вы нажимаете клавишу Tab после нажатия кнопки, фокус должен получить следующий элемент.
- Когда вы нажимаете Shift + Tab после нажатия кнопки, предыдущий элемент должен получить фокус.
Примечание. Если вы относитесь к тому типу людей, которые ненавидят стиль фокусировки по умолчанию, вы можете изменить стиль кольца фокусировки (или дождаться широкой поддержки :focus-visible).
Есть быстрое решение, если вы хотите, чтобы другие браузеры работали в соответствии с реализацией Chrome. Все, что вам нужно сделать, это добавить этот код вверху вашего JavaScript.
- Появляется свечение фокуса.
- Tab переходит к следующему элементу.
- Shift-Tab — переход к предыдущему элементу
Важное примечание. Этот код следует поместить В ВЕРХНЮЮ часть файлов JavaScript. Это работает, потому что прослушиватели событий вызываются в том порядке, в котором они объявлены. Фокус всегда будет сначала идти на кнопку. Затем вы можете перенаправить фокус на другие элементы, если хотите.
Если вам интересно, зачем я проводил эти тесты: я обнаружил противоречивое поведение, когда писал раздел «Клавиатура» для «Изучения JavaScript». Я провел эти тесты, потому что хотел научить своих учеников правильно обращаться с кнопками и фокусом (что является важной частью специальных возможностей!).
Если вам понравилась эта статья, поддержите меня, поделившись этой статьей в Твиттере или купив мне кофе 😉. Если вы заметили опечатку, я был бы признателен, если бы вы могли исправить ее на GitHub. Спасибо!
Ничего не происходит, когда вы нажимаете кнопку «Назад» в веб-браузере? Вместо этого просто перезагружается текущая страница? Или кнопка «Назад» отображается серым цветом?
Обычно кнопка "Назад" в браузере работает неправильно из-за таких причин, как перенаправление ссылок и конфликтующие расширения браузера. Но в редких случаях вы можете столкнуться с чем-то столь же серьезным, как вредоносное дополнение или угонщик браузера.
Используйте приведенный ниже список предложений и решений, чтобы исправить ситуацию, когда кнопка «Назад» не работает в Chrome, Mozilla Firefox, Microsoft Edge и Apple Safari.
Переключение вкладок или окон
Большинство ссылок, по которым вы нажимаете, открываются в одной и той же вкладке браузера. Но если кнопка «Назад» на только что загруженной странице отображается серым цветом, скорее всего, она открылась в новой вкладке или окне.
В этом случае вы не можете использовать кнопку «Назад». Единственный способ вернуться на предыдущую страницу — переключить вкладки или окна.
![]()
< бр />
Если вы используете расширение, которое заставляет ваш браузер открывать ссылки в новых вкладках или окнах, вы можете отключить его (подробнее об этом ниже).
Несколько переадресаций
Некоторые ссылки перенаправляют через один или несколько веб-адресов перед загрузкой. В этом случае нажатие кнопки «Назад» может привести к перезагрузке той же страницы.
Один из способов решить эту проблему – нажать и удерживать кнопку "Назад". Это побуждает браузеры, такие как Chrome, отображать стек истории для вкладки. Затем просто выберите страницу, на которую вы хотите попасть, и вы сможете пропустить адреса перенаправления. Это также работает в мобильных браузерах; просто нажмите и удерживайте кнопку «Назад», чтобы открыть историю вкладки.
![]()
Еще один способ решить эту проблему – быстро нажать кнопку "Назад" несколько раз. Это помогает предотвратить срабатывание любых предыдущих переадресаций.
Отключить конфликтующие надстройки браузера
В частности, на настольных устройствах расширения могут препятствовать правильной работе кнопки "Назад" в вашем браузере. Например, такие надстройки, как блокировщики контента и диспетчеры пользовательских скриптов, часто вызывают это. Их деактивация должна помочь.
Если вы не можете думать ни о чем конкретном, начните с отключения всех расширений браузера. Вы можете получить доступ к странице расширений через меню вашего браузера (найдите значок с тремя точками или линиями). Например, в Chrome выберите Дополнительные инструменты > Расширения в меню Chrome, чтобы открыть список расширений.
![]()
< бр />
Если кнопка "Назад" начинает работать правильно после деактивации всех расширений, начните повторно включать их одно за другим, пока не выясните, в чем причина проблемы.
Очистить кеш браузера и файлы cookie
Повреждённый или устаревший кеш браузера — ещё одна причина, из-за которой веб-сайты или сам браузер работают неправильно. Если щелчок или нажатие кнопки «Назад» ничего не делает или вызывает перезагрузку той же страницы, ее очистка может помочь исправить ситуацию. Вот как удалить кеш в двух популярных настольных браузерах.
Google Chrome
Откройте меню Chrome и выберите "Настройки > Конфиденциальность и безопасность > Очистить данные браузера". Затем установите флажки рядом с пунктами «Файлы cookie и другие данные сайта» и «Кэшированные изображения и файлы», установите для параметра «Диапазон времени» значение «Все время» и выберите «Очистить данные».
![]()
Мозилла Фаерфокс
Откройте меню Firefox и выберите «Настройки» > «Конфиденциальность и безопасность» > «Файлы cookie и данные сайтов» > «Очистить данные». Затем установите флажки рядом с пунктами «Файлы cookie», «Данные сайта» и «Кэшированный веб-контент» и выберите «Очистить».
![]()
Если вы используете другой браузер, обратитесь к нашему основному руководству по очистке кэша в любом браузере для получения конкретных инструкций.
Обновите веб-браузер
Устаревший браузер может привести к самым разным странным проблемам. Если кнопка «Назад» не работает без видимых причин, попробуйте установить последние обновления. Это должно помочь исключить любые известные ошибки из уравнения.
Большинство настольных браузеров автоматически обновляются, но вы всегда можете инициировать проверку обновлений вручную. Вот как это сделать в Chrome и Firefox.
Google Chrome
Откройте меню Chrome и выберите Справка > О Google Chrome. Затем подождите, пока Chrome выполнит поиск последних обновлений. Если он обнаружит какие-либо обновления, он должен начать их установку автоматически.
![]()
< бр />
Мозилла Фаерфокс
Откройте меню Firefox и выберите Справка > О Firefox. Затем подождите, пока Firefox выполнит поиск и установит последние обновления. После этого перезапустите браузер.
![]()
< бр />
На мобильных устройствах вы можете установить последние обновления браузера, перейдя в Play Маркет (Android) или App Store (iOS).
Проверка на наличие вредоносных программ и угонщиков браузера
Вредоносное ПО и надстройки могут нарушить работу браузера по умолчанию. Помимо неисправной кнопки «Назад», вы также можете заметить другое необычное поведение, например замедление работы, сбои и т. д.
Лучший способ исправить это — просканировать устройство с помощью специальной утилиты для удаления вредоносных программ. Например, Malwarebytes может помочь вам удалить вредоносное ПО как на ПК, так и на Mac.
Если вы используете Chrome в Windows, вы также можете использовать его встроенный инструмент для удаления вредоносных программ, чтобы удалить вредоносные расширения и угонщики браузера. Чтобы запустить его, откройте меню Chrome и выберите «Настройки» > «Дополнительно» > «Сброс и очистка» > «Очистить компьютер» > «Найти».
![]()
Сбросить настройки веб-браузера
Большинство веб-браузеров для настольных компьютеров предоставляют возможность сброса для устранения серьезных проблем. Если ни одно из приведенных выше предложений или решений не помогло исправить кнопку «Назад», сделайте это сейчас.
Ниже описано, как сбросить настройки Chrome и Firefox. Вы можете сделать резервную копию данных просмотра, синхронизировав их с учетной записью Google или Firefox перед началом работы. Если вы используете другой браузер, поищите конкретные инструкции на его страницах поддержки в Интернете.
Google Chrome
Откройте меню Chrome и выберите "Настройки". Затем выберите «Дополнительно» > «Сброс и очистка» > «Восстановить исходные значения по умолчанию».
![]()
< бр />
Мозилла Фаерфокс
Введите about:support в новую вкладку Firefox и нажмите Enter. Затем выберите Обновить Firefox.
![]()
< бр />
На мобильных устройствах вы можете удалить и переустановить браузер, чтобы устранить основные проблемы, мешающие работе кнопки "Назад". Однако это невозможно в стандартных мобильных браузерах, таких как Chrome (Android) и Safari (iOS).
Дилум Сеневиратне — независимый технический писатель и блогер с трехлетним опытом написания статей для онлайн-изданий о технологиях. Он специализируется на темах, связанных с iOS, iPadOS, macOS и веб-приложениями Google. Когда он не работает на своей Magic Keyboard, вы можете застать его за просмотром советов по продуктивности на YouTube. Прочитать полную биографию Дилума
Понравился ли вам этот совет? Если это так, загляните на наш собственный канал на YouTube, где мы рассказываем о Windows, Mac, программном обеспечении и приложениях, а также предлагаем множество советов по устранению неполадок и видео с практическими рекомендациями. Нажмите кнопку ниже, чтобы подписаться!
DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.
Событие click довольно простое и удобное в использовании; вы слушаете событие и запускаете код, когда событие запускается. Он работает практически со всеми существующими элементами HTML, что является основной функцией DOM API.
Как это часто бывает с моделями DOM и JavaScript, необходимо учитывать нюансы. Некоторые нюансы, связанные с событием click, обычно не вызывают особого беспокойства. Они незначительны, и, вероятно, большинство людей даже не заметят их в большинстве случаев использования.
Возьмем, к примеру, событие click, прослушивающее дедушку интерактивных элементов, элемент. Есть нюансы, связанные с нажатиями кнопок и эти нюансы, вроде разницы между «кликом» от указателя мыши и «кликом» с клавиатуры. С этой точки зрения клик не всегда является «кликом» в том смысле, в каком его обычно определяют. На самом деле я сталкивался с ситуациями (хотя и не во многих), когда различие между этими двумя типами кликов было полезным.
Как мы различаем разные типы кликов? Это то, во что мы погружаемся!
Самое главное
Элемент, как описано MDN, просто:
Элемент HTML представляет собой нажимаемую кнопку, используемую для отправки форм или в любом месте документа для обеспечения стандартных функциональных возможностей кнопки. По умолчанию HTML-кнопки представлены в стиле платформы, на которой работает пользовательский агент, но внешний вид кнопок можно изменить с помощью CSS.
Часть, которую мы рассмотрим, — это, очевидно, часть этого описания «где угодно в документе для доступных стандартных функций кнопок». Как вы, возможно, знаете, элемент кнопки может иметь встроенную функциональность внутри формы, например, в некоторых ситуациях он может отправлять форму. На самом деле нас интересует только основная функция щелчка элемента. Так что представьте, что это простая кнопка, размещенная на странице для определенных функций, когда кто-то взаимодействует с ней.
Учтите, что я сказал «взаимодействует с ним», а не просто нажимает на него. По историческим причинам и по соображениям удобства использования можно «щелкнуть» кнопку, установив на ней фокус с помощью табуляции, а затем нажав клавишу «Пробел» или «Ввод» на клавиатуре. Это немного совпадает с навигацией с помощью клавиатуры и специальными возможностями; эта встроенная функция существовала задолго до того, как доступность стала проблемой. Тем не менее, устаревшая функция по понятным причинам очень помогает с доступностью.
В приведенном выше примере вы можете нажать кнопку, и ее текстовая метка изменится. Через мгновение исходный текст будет сброшен. Вы также можете щелкнуть в другом месте пера, нажать Tab, чтобы выделить кнопку, а затем использовать пробел или Enter, чтобы «щелкнуть» ее. Тот же текст появляется и сбрасывается. Нет JavaScript для работы с клавиатурой; это встроенная функция браузера. По сути, в этом примере кнопка знает только о событии нажатия, но не о том, как оно произошло.
Одним интересным отличием, которое следует учитывать, является поведение кнопки в разных браузерах, особенно ее стиль. Кнопки в этих примерах настроены на изменение цвета в активном состоянии; поэтому вы нажимаете на него, и он становится фиолетовым. Рассмотрим это изображение, на котором показаны состояния при взаимодействии с клавиатурой.
Первое — статическое состояние, второе – когда кнопка получает фокус от табуляции клавиатуры, третье – взаимодействие с клавиатурой, четвертое — результат взаимодействия. В Firefox вы увидите только первые два и последнее состояния; при взаимодействии с клавишами Enter или Space для «щелчка» вы не видите третьего состояния. Он остается во втором, или «сфокусированном», состоянии во время взаимодействия, а затем переходит к последнему. Текст меняется, как и ожидалось, но цвета не меняются. Chrome дает нам немного больше, так как вы увидите, что первые два состояния такие же, как у Firefox. Если вы используете клавишу «Пробел», чтобы «щелкнуть» кнопку, вы увидите третье состояние с изменением цвета, а затем последнее. Интересно, что в Chrome, если вы используете Enter для взаимодействия с кнопкой, вы не увидите третьего состояния с изменением цвета, как в Firefox. Если вам интересно, Safari ведет себя так же, как Chrome.
Код прослушивателя событий довольно прост:
Теперь давайте рассмотрим кое-что с этим кодом. Что делать, если вы оказались в ситуации, когда вам нужно знать, что вызвало «щелчок»? Событие щелчка обычно связано с указателем, как правило, с мышью, но здесь клавиша пробела или ввода вызывает то же событие. Другие элементы формы имеют аналогичную функциональность в зависимости от контекста, но любые элементы, которые не являются интерактивными по умолчанию, потребуют для работы дополнительного события клавиатуры. Для элемента кнопки этот дополнительный прослушиватель событий не требуется.
Я не буду слишком углубляться в причины, по которым я хочу знать, что вызвало событие клика. Могу сказать, что я иногда сталкивался с ситуациями, когда было полезно знать. Иногда из соображений стиля, иногда из-за доступности, а иногда и из-за определенной функциональности. Часто разные контексты или ситуации приводят к разным причинам.
Считайте нижеследующее не Путем™, а исследованием тех нюансов, о которых мы говорим. Мы рассмотрим различные способы взаимодействия с элементом кнопки, генерируемые события и использование конкретных функций этих событий. Надеемся, что следующие примеры могут предоставить некоторую полезную информацию о событиях; или, при необходимости, распространить на другие элементы HTML.
Один из простых способов отличить событие щелчка клавиатуры от щелчка мыши – это использовать события keyup и mouseup, исключив событие щелчка из уравнения.
Теперь, когда вы используете мышь или клавиатуру, измененный текст отражает, какое событие является каким. Версия с клавиатурой даже сообщит вам об использовании клавиши пробела вместо клавиши ввода.
Вот новый код:
Немного многословно, правда, но немного рефакторинга мы займемся чуть позже. Этот пример показывает нюанс, который необходимо урегулировать. События mouseup и keyup имеют свои особенности, которые следует учитывать в этой ситуации.
С событием mouseup почти каждая кнопка мыши может вызвать это событие. Обычно мы не хотим, чтобы правая кнопка мыши вызывала, например, событие «щелчок» по кнопке. Итак, мы ищем e.button со значением 0, чтобы определить основную кнопку мыши. Таким образом, это работает так же, как и событие щелчка, но мы точно знаем, что это была мышь.
С событием keyup происходит то же самое, когда каждая клавиша на клавиатуре вызывает это событие. Итак, мы смотрим на свойство кода события, чтобы дождаться нажатия клавиши пробела или ввода. Итак, теперь это работает так же, как событие щелчка, но мы знаем, что использовалась клавиатура. Мы даже знаем, какая из двух клавиш должна работать на кнопке.
Еще раз определить, что есть что
Хотя предыдущий пример работает, кажется, что кода слишком много для такой простой концепции. На самом деле мы просто хотим знать, был ли «щелчок» мышью или клавиатурой. В большинстве случаев нам, вероятно, было бы все равно, были ли источником щелчка клавиши пробела или клавиши ввода. Но, если нам не все равно, мы можем воспользоваться преимуществами свойств события keyup, чтобы отметить, что есть что.
В различных спецификациях события клика (что приводит нас к спецификации событий пользовательского интерфейса) есть определенные свойства, назначенные событию. В некоторых браузерах их больше, но сейчас я хочу сосредоточиться на свойстве detail. Это свойство связано непосредственно с вводом мыши, который инициировал само событие. Таким образом, если была использована кнопка мыши, свойство должно возвращать 1 в качестве значения. Он также потенциально может сообщать о более высоком числе, представляющем несколько кликов, которые часто привязаны к порогу двойного клика, определяемому ОС устройства. В качестве бонуса это свойство сообщает об нуле для события щелчка, вызванного чем-то другим, кроме ввода с помощью мыши, например клавиатурой.
Я воспользуюсь моментом, чтобы поблагодарить Джимми в комментариях. Изначально у меня был другой метод определения щелчков клавиатуры и мыши, но он не был одинаковым для всех браузеров, так как Safari сообщал значения немного разные. Джимми предложил свойство detail, поскольку оно было более последовательным; поэтому я соответственно обновил свои примеры. Спасибо Джимми за предложение!
Вот наш новый код:
Вернемся к простому событию щелчка, но на этот раз мы ищем значение свойства, чтобы определить, является ли это «щелчком» клавиатуры или мыши. Обратите внимание, что у нас больше нет способа определить, какая клавиша была использована на клавиатуре, но в данном контексте это не имеет большого значения.
Какой из многих?
Сейчас самое время поговорить о событиях указателя. Как описано в MDN:
Большая часть современного веб-контента предполагает, что указывающим устройством пользователя будет мышь. Однако, поскольку многие устройства поддерживают другие типы указывающих устройств ввода, такие как перо/стилус и сенсорные поверхности, необходимы расширения существующих моделей событий указывающего устройства. События указателя адресуют, что нужно.
Теперь давайте рассмотрим необходимость знать, какой тип указателя использовался для нажатия этой кнопки. Полагаясь только на событие клика, на самом деле не предоставляет эту информацию. У Chrome есть интересное свойство в событии click, sourceCapabilities. Это свойство, в свою очередь, имеет свойство с именем firesTouchEvents, которое является логическим значением. Эта информация не всегда доступна, так как Firefox и Safari еще не поддерживают ее. Тем не менее, событие указателя доступно практически везде, даже в IE11 всех браузеров.
Это событие может предоставить интересные данные о событиях касания или пера. Такие вещи, как давление, размер контакта, наклон и многое другое. В нашем примере мы просто сосредоточимся на pointerType , который сообщает нам тип устройства, вызвавшего событие.
Еще один момент, который следует отметить в отношении свойства детали в событии клика, упомянутом выше. Событие указателя также имеет подробное свойство, но в настоящее время в спецификации указано, что значение этого свойства всегда должно быть равно нулю. Что явно противоречит предыдущей идее о том, что нулевое значение означает клавиатуру, а значение выше нуля означает ввод с помощью мыши. Поскольку мы не можем полагаться на это свойство в событии указателя, это затрудняет включение событий щелчка и указателя в одну и ту же ситуацию. Справедливости ради, скорее всего, вы бы и не захотели этого делать.
При нажатии на кнопку теперь будет отображаться используемый указатель. Код для этого довольно прост:
На самом деле, не так уж сильно отличается от предыдущих примеров. Мы слушаем событие pointerup на кнопке и выводим pointerType события. Разница теперь в том, что для события клика нет прослушивателя событий. Таким образом, нажатие на кнопку и использование пробела или клавиши ввода ничего не делает. Событие click по-прежнему срабатывает, но мы его не прослушиваем. На данный момент у нас есть только код, привязанный к кнопке, которая реагирует только на событие указателя.
Это, очевидно, оставляет пробел в функциональности, интерактивности клавиатуры, поэтому нам все равно нужно включить событие клика. Поскольку мы уже используем событие указателя для более традиционного щелчка мыши (и других событий указателя), мы должны заблокировать событие щелчка. Нам нужно только разрешить самой клавиатуре вызывать событие щелчка.
Код для этого аналогичен приведенному выше примеру "Что есть что". Разница в том, что мы используем pointerup вместо mouseup:
Здесь мы снова используем свойство detail, чтобы определить, был ли щелчок вызван клавиатурой. Таким образом, щелчок мыши будет обрабатываться событием указателя. Если кто-то хочет знать, была ли использована клавиша пробел или ввод, то можно использовать приведенный выше пример keyup. Даже в этом случае вместо события click можно использовать событие keyup, в зависимости от того, как вы хотите к нему подойти.
Еще один вариант, чтобы определить, какой из многих
В связи с постоянной необходимостью рефакторинга для более чистого кода мы можем попробовать другой способ кодирования.
Да, работает так же, как и раньше. Теперь код:
Еще одна уменьшенная версия для рассмотрения: на этот раз мы сократили наш код до одного метода-обработчика, который вызывается как событиями pointerup, так и событиями click. Сначала мы определяем, вызвал ли событие щелчок мышью, потому что свойство detail имеет значение больше нуля; если это так, мы хотим игнорировать его в пользу события указателя.
Затем метод проверяет событие указателя и, найдя его, сообщает, какой тип указателя произошел. В противном случае метод проверяет взаимодействие с клавиатурой, если детализация равна нулю, и сообщает об этом. Если ни один из них не является виновником, он просто сообщает, что что-то вызвало запуск этого кода.
Итак, у нас есть приличное количество примеров того, как обрабатывать взаимодействия с кнопками, сообщая об источнике этих взаимодействий. Тем не менее, это лишь один из немногих элементов формы, которые мы так привыкли использовать в проектах. Как аналогичный код работает с другими элементами?
Действительно, аналогичный код работает с флажками почти так же.
Как вы уже догадались, есть еще несколько нюансов. Обычное использование type="checkbox"> — это связанный элемент метки, который привязан к вводу через атрибут for. Одной из основных особенностей этой комбинации является то, что при нажатии на элемент метки будет установлен соответствующий флажок.
Теперь, если бы мы прикрепили прослушиватели событий для события click к обоим элементам, мы получили бы результаты, которые должны быть очевидными, даже если они немного странные. Например, мы получаем одно событие клика, запускаемое при нажатии флажка. Если мы щелкнем метку, вместо этого мы получим два события щелчка. Если бы мы записали в console.log цель этих событий, то увидели бы в двойном событии, что одно из них предназначено для метки (что имеет смысл, поскольку мы щелкнули по нему), но есть и второе событие из флажка. Хотя я знаю, что это должны быть ожидаемые результаты, это немного странно, потому что мы ожидаем результатов от взаимодействий пользователя. Однако результаты включают взаимодействия, вызванные браузером.
Итак, следующий шаг — посмотреть, что произойдет, если мы будем прослушивать pointerup , как в некоторых предыдущих примерах, в тех же сценариях. В этом случае мы не получаем два события при нажатии на элемент метки. Это также имеет смысл, так как мы больше не прослушиваем событие щелчка, которое запускается флажком при нажатии на метку.
Есть еще один сценарий для рассмотрения. Помните, что у нас есть возможность поместить флажок внутри элемента label, что характерно для настраиваемых флажков для целей стиля.
В этом случае нам действительно нужно поместить прослушиватель событий только на ярлык, а не на сам флажок. Это уменьшает количество задействованных прослушивателей событий, но мы получаем те же результаты. События Clicks запускаются как одно событие для нажатия на метку и два события, если вы нажимаете на флажок. События pointerup делают то же самое, что и раньше, одиночные события, если щелкнуть любой элемент.
Все это необходимо учитывать при попытке имитировать поведение элемента кнопки в предыдущих примерах. К счастью, этого не так уж и много. Вот пример того, какой тип взаимодействия был выполнен с элементом формы флажка:
Этот пример включает оба типа сценариев с флажками, упомянутых выше; верхняя строка представляет собой комбинацию флажка/метки с атрибутом for, а нижняя — флажок внутри метки. Если щелкнуть любой из них, под ними появится сообщение с указанием типа взаимодействия. Поэтому щелкните один из них мышью или используйте клавиатуру, чтобы перейти к ним, а затем взаимодействуйте с пробелом; как и в примерах с кнопками, он должен указать вам, какой тип взаимодействия вызывает это действие.
Чтобы упростить задачу с точки зрения того, сколько мне нужно прослушивателей событий, я обернул флажки контейнером div, который фактически реагирует на взаимодействие с флажками.Вам не обязательно делать это таким образом, но это был удобный способ сделать это для моих нужд.
Итак, поскольку мы прослушиваем эти события в контейнере div, я хотел ограничить цели только меткой и вводом. Технически в некоторых случаях можно было бы «щелкнуть» по самому контейнеру div; чего бы мы не хотели. Затем мы проверяем событие указателя и обновляем сообщение. После этого мы пытаемся определить код клавиши пробела, который должен был появиться в результате события keyup. Возможно, вы помните, что в приведенных выше примерах кнопок использовались клавиши Enter и Space. Оказывается, чекбоксы часто не реагируют на клавишу Enter в браузерах. Еще один забавный нюанс, о котором следует помнить.
Переключение радиокнопок
К счастью, для ввода переключателей мы по-прежнему можем использовать тот же код с похожими структурами HTML. Это в основном работает одинаково, потому что флажки и переключатели по существу создаются одинаково — просто переключатели, как правило, входят в группы, связанные вместе, в то время как флажки являются отдельными элементами даже в группе. Как вы увидите в следующем примере, это работает так же:
Опять же, тот же код присоединен к аналогичному div-контейнеру, чтобы избежать необходимости выполнять несколько прослушивателей событий для каждого связанного элемента.
Когда нюанс может стать возможностью
Мне показалось, что слово "нюанс" было бы хорошим выбором, потому что то, что мы здесь рассмотрели, на самом деле не является "проблемой" с типичным отрицательным оттенком, который это слово обычно имеет в кругах программистов. Я всегда стараюсь видеть такие вещи, как опыт обучения или возможности. Как я могу использовать то, что я знаю сегодня, чтобы немного продвинуться вперед, или, может быть, пришло время исследовать что-то новое для решения проблем, с которыми я сталкиваюсь. Надеемся, что приведенные выше примеры дают несколько иной взгляд на вещи в зависимости от потребностей проекта.
Несмотря на то, что в этой статье основное внимание уделяется элементам формы из-за нюансов кликов, которые они обычно имеют при взаимодействии с клавиатурой, часть или все это можно распространить на другие элементы. Все зависит от контекста ситуации. Например, я помню, что мне приходилось много раз выполнять несколько событий для одних и тех же элементов в зависимости от контекста; часто из соображений доступности и навигации с помощью клавиатуры. Создали ли вы пользовательский элемент с более приятным дизайном, чем стандартный, который также реагирует на навигацию с помощью клавиатуры? Вы поймете, что я имею в виду, когда доберетесь туда.
Просто помните: «клик» сегодня не всегда должен быть тем, чем, как мы думаем, был клик всегда.
Читайте также:
< бр />
< бр />
< бр />
< бр />
< бр />
< бр />