Как сделать чтобы после нажатия на кнопку происходило действие html
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Некоторые программы работают с вводом пользователя, мышью и клавиатурой. Время возникновения такого ввода и последовательность данных нельзя предсказать заранее. Это требует иного подхода к контролю над порядком выполнения программы, чем уже привычный нам.
Обработчики событий
Представьте интерфейс, в котором единственным способом узнать, нажали ли на кнопку клавиатуры, было бы считывание текущего состояния кнопки. Чтобы реагировать на нажатия, вам пришлось бы постоянно считывать состояния кнопок, чтобы вы могли поймать это состояние, пока кнопка не отжалась. Было бы опасно проводить другие подсчёты, отнимающие процессорное время, так как можно было бы пропустить момент нажатия.
Таким образом ввод обрабатывался на примитивных устройствах. Шагом вперёд было бы, если железо или операционка замечали бы нажатие кнопки и передавали бы его в очередь. Затем программа периодически могла бы проверять очередь на новые события и реагировать на то, что находится в очереди.
Разумеется, она должна помнить о проверке, и делать это достаточно часто, потому что наличие длительного промежутка времени между нажатием кнопки и тем, когда программа замечает и реагирует на это, ведёт к восприятию этой программы как медленно работающей. Такой подход используется достаточно редко.
Вариант получше – некая промежуточная система, которая позволяет коду реагировать на события в момент их возникновения. Браузеры позволяют это делать путём регистрации функций как обработчиков заданных событий.
Функция addEventListener регистрирует свой второй аргумент как функцию, которая вызывается, когда описанное в первом аргументе событие случается.
События и узлы DOM
Пример назначает обработчик на DOM-узел кнопки. Нажатия на кнопку запускают обработчик, а нажатия на другие части документа – не запускают.
Присвоение узлу атрибута onclick работает похоже. Но у узла есть только один атрибут onclick, значит таким способом вы можете зарегистрировать только один обработчик. Метод addEventListener позволяет добавлять любое количество обработчиков, так что вы не замените случайно уже назначенный ранее обработчик.
Метод removeEventListener, вызванный с такими же аргументами, как addEventListener, удаляет обработчик.
Чтобы это провернуть, мы даём функции имя (в данном случае, once), чтобы её можно было передать и в addEventListener, и в removeEventListener.
Объекты событий
В примерах мы проигнорировали тот факт, что функциям-обработчикам передаётся аргумент – объект события. В нём хранится дополнительная информация о событии. К примеру, если надо узнать, какая кнопка мыши была нажата, мы можем обратиться к свойству which этого объекта.
Распространение (propagation)
Если и у параграфа и у кнопки есть обработчики, то первым запустится более конкретный – то есть, обработчик кнопки. Событие как бы распространяется наружу, от узла, где оно случилось, до его родительского и далее до корня документа. После отработки всех обработчиков всех промежуточных узлов, очередь среагировать на событие доходит и до самого окна.
У большинства объектов событий есть свойство target, ссылающееся на узел, который запустил обработку. Его можно использовать для проверки того, что вы не обрабатываете что-то, пришедшее с ненужного вам узла.
Также возможно использовать свойство target, чтобы распространить обработку конкретного типа события. К примеру, если у вас есть узел, содержащий длинный список кнопок, было бы удобнее зарегистрировать один обработчик событий для узла, и в нём выяснять, нажали ли на кнопку – вместо того, чтобы регистрировать обработчики каждой кнопки по отдельности.
Действия по умолчанию
У многих событий есть действия по умолчанию. При клике на ссылку вы перейдёте по ней. При нажатии на стрелку вниз браузер прокрутит страницу вниз. По правому клику мыши вы увидите контекстное меню. И так далее.
Для большинства типов событий обработчики событий вызываются до того, как сработает действие по умолчанию. Если обработчик не хочет, чтобы это действие происходило (часто потому, что он уже обработал его), он может вызвать метод preventDefault объекта события.
Это можно использовать для создания своих горячих клавиш или контекстного меню. Также это можно использовать для слома привычного пользователю интерфейса. К примеру, вот ссылка, по которой нельзя пройти.
Не делайте так – если у вас нет очень серьёзной причины! Пользователям вашей страницы будет очень неудобно, когда они столкнутся с неожиданными результатами своих действий. В зависимости от браузера, некоторые события перехватить нельзя. В Chrome нельзя обрабатывать горячие клавиши закрытия текущей закладки (Ctrl-W or Command-W).
События от кнопок клавиатуры
В примере упомянуто свойство keyCode объекта события. Так вы можете узнать, какая именно кнопка нажата или отпущена. К сожалению, не всегда очевидно, как преобразовать числовые коды в нужную кнопку.
Для цифр и букв код будет кодом символа Unicode, связанного с прописным символом, изображённым на кнопке. Метод строки charCodeAt даёт нам этот код.
У других кнопок коды менее предсказуемы. Лучший способ их выяснить – экспериментальный. Зарегистрировать обработчик, который записывает коды клавиш, и нажать нужную кнопку.
Кнопки-модификаторы типа Shift, Ctrl, Alt, и Meta (Command на Mac) создают события, как и нормальные кнопки. Но при разборе комбинаций клавиш можно выяснить, были ли нажаты модификаторы, через свойства shiftKey, ctrlKey, altKey, и metaKey событий клавиатуры и мыши.
Источником события нажатия клавиши узел становится в зависимости от того, где находился фокус ввода во время нажатия. Обычные узлы не могут получить фокус ввода (если только вы не задали им атрибут tabindex), а такие, как ссылки, кнопки и поля форм – могут. Мы вернёся к полям ввода в главе 18. Когда ни у чего нет фокуса, в качестве целевого узла событий работает document.body
Кнопки мыши
Для получения точных координат места, где произошло событие мыши, обратитесь к свойствам pageX и pageY – они содержат координаты в пикселях относительно верхнего левого угла.
В примере создана примитивная программа для рисования. Каждый раз по клику на документе он добавляет точку под вашим курсором. В главе 19 будет представлена менее примитивная программа для рисования.
Свойства clientX и clientY похожи на pageX и pageY, но дают координаты относительно части документа, которая видна сейчас (если документ был прокручен). Это удобно при сравнении координат мыши с координатами, которые возвращает getBoundingClientRect – его возврат тоже связан с относительными координатами видимой части документа.
Движение мыши
К примеру, следующая программа отображает полоску и устанавливает обработку событий так, что движение влево и вправо уменьшает или увеличивает её ширину.
Функция isInside перебирает всех предков узла, пока не доходит до верха документа (и тогда узел равен null), или же не находит заданного ей родителя.
События прокрутки
В примере в правом верхнем углу документа создаётся индикатор процесса, который заполняется по мере прокрутки элемента вниз.
Позиция элемента fixed означает почти то же, что absolute, но ещё и предотвращает прокручивание элемента вместе с остальным документом. Смысл в том, чтобы оставить наш индикатор в углу. Внутри него находится другой элемент, который изменяет размер, отражая текущий прогресс. Мы используем проценты вместо px для задания ширины, чтобы размер элемента изменялся относительно размера всего индикатора.
Глобальная переменная innerHeight даёт высоту окна, которую надо вычесть из полной высоты прокручиваемого элемента – при достижении конца элемента прокрутка заканчивается. (Также в дополнение к innerHeight есть переменная innerWidth). Поделив текущую позицию прокрутки pageYOffset на максимальную позицию прокрутки, и умножив на 100, мы получили процент для индикатора.
Вызов preventDefault не предотвращает прокрутку. Обработчик события вызывается уже после того, как прокрутка случилась.
События, связанные с фокусом
При получении элементом фокуса браузер запускает событие “focus”. Когда он теряет фокус, запускается событие “blur”.
В отличие от предыдущих событий, эти два не распространяются. Обработчик родительского узла не уведомляется о получении или утрате фокуса дочерним элементом.
Следующий пример демонстрирует текст подсказки для того текстового поля, у которого в данный момент фокус.
Объект window получает события focus и blur, когда пользователь выделяет или убирает фокус с закладки браузера или окна браузера, в котором показан документ.
Событие загрузки
Когда заканчивается загрузка страницы, на объектах window и body запускается событие “load”. Это часто используется для планирования инициализирующих действий, которым необходим полностью построенный документ. Вспомните, что содержимое тегов
График выполнения скрипта
Несколько вещей могут привести к старту скрипта. Чтение тега - одна из них. Запуск события – ещё одна. В главе 13 обсуждается функция requestAnimationFrame, которая планирует запуск функции перед следующей перерисовкой страницы. Это ещё один способ запустить скрипт.
Важно понять, что хотя события и запускаются в любой момент, два разных скрипта одновременно работать не могут. Если скрипт работает, обработчики событий и запланированные другим способом куски кода будут ждать своей очереди. Поэтому документ подвисает, когда скрипт работает слишком долго. Браузер не обрабатывает щелчки и другие события внутри документа потому, что он не может запустить обработчики событий, пока работает текущий скрипт.
В некоторых программных окружениях можно запускать несколько потоков одновременно. Можно сделать программу быстрее, если выполнять несколько вещей одновременно. Но когда несколько действующих лиц трогают одни и те же части системы в одно и то же время, продумывать программу становится на порядок сложнее.
Предположим, у нас есть следующий код в файле code/squareworker.js:
addEventListener( "message" , function ( event ) < postMessage(event.data * event.data); >);
Установка таймеров
Функция setTimeout схожа с requestAnimationFrame. Она планирует запуск другой функции в будущем. Но вместо вызова функции при следующей перерисовке страницы, она ждёт заданное в миллисекундах время. Эта страница через две секунды превращается из синей в жёлтую:
Иногда вам надо отменить запланированную функцию. Это можно сделать, сохранив значение, возвращаемое setTimeout, и затем вызвав с ним clearTimeout.
Функция cancelAnimationFrame работает так же, как clearTimeout – вызов её со значением, возвращённым requestAnimationFrame, отменит этот кадр (если он уже не был вызван).
Похожий набор функций, setInterval и clearInterval используется для установки таймеров, которые будут повторяться каждые X миллисекунд.
Устранение помех (debouncing)
В первом примере надо сделать что-то, когда пользователь печатает, но не надо делать это сразу после запуска каждого события нажатия на клавиши. Когда они быстро печатают, нам надо подождать, когда возникнет пауза. Вместо немедленного выполнения действия в обработчике, мы устанавливаем таймаут. Также мы очищаем предыдущий таймаут, если он был, так что если события близко одно от другого (ближе, чем задержка таймера), предыдущее событие будет отменено.
Если задать undefined для clearTimeout, или вызвать его с таймаутом, который уже произошёл, то ничего не произойдёт. Таким образом, не надо осторожничать при его вызове, и мы просто поступаем так для каждого события.
Можно использовать немного другой подход, если нам надо разделить ответы минимальными промежутками времени, но при этом запускать их в то время, когда происходят события, а не после. К примеру, надо реагировать на события "mousemove", показывая текущие координаты мыши, но только каждые 250 миллисекунд.
Обработчики событий позволяют обнаруживать и реагировать на события, над которыми мы не властны. Для их регистрации используется метод addEventListener.
У событий есть определяющий их тип ("keydown", "focus", и так далее). Большинство событий вызываются конкретными узлами DOM, и затем распространяются на их предков, позволяя связанными с ними обработчикам обрабатывать их.
При вызове обработчика ему передаётся объект события с дополнительной информацией о событии. У объекта также есть методы, позволяющие остановить дальнейшее распространение (stopPropagation) и предотвратить обработку события браузером по умолчанию (preventDefault).
Нажатия на клавиши запускают события "keydown", "keypress" и "keyup". Нажатия на кнопки мыши запускают события "mousedown", "mouseup" и "click". Движения мыши запускают события "mousemove", и возможно "mouseenter" и "mouseout".
Прокрутку можно обнаружить через событие “scroll”, а изменения фокуса через события "focus" и "blur". Когда заканчивается загрузка документа, у объекта window запускается событие “load”.
В одно и то же время может работать один участок программы. Поэтому обработчики событий и другие запланированные скрипты будут ждать окончания работы текущих.
Упражнения
Цензура клавиатуры
В промежутке с 1928 по 2013 год турецкие законы запрещали использование букв Q, W и X в официальных документах. Это являлось частью общей инициативы подавления курдской культуры – эти буквы используются в языке курдов, но не у турков.
В качестве упражнения на тему странного использования технологий, я прошу вас запрограммировать поле для ввода текста так, чтобы эти буквы нельзя было туда вписать. Насчет копирования и вставки и других подобных возможных обходов правила не беспокойтесь.
След мыши
Я хочу, что бы вы в упражнении сделали такой след. Используйте с абсолютным позиционированием, фиксированным размером и цветом фона. Создайте кучку элементов и при движении мыши показывайте их следом за курсором.
К этому можно подойти многими способами. Можно сделать очень простое или очень сложное решение, как угодно. Простое – хранить фиксированное количество элементов и проходить по ним в цикле, двигая каждый следующий на текущее место курсора, каждый раз когда случается событие "mousemove".
Закладки
Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом.
В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов
Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.
Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.
Добавьте строчный onclick event
Пример
Пример
Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.
Используйте атрибут action или formaction внутри элемента .
Пример
Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target="_blank" .
Пример
Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.
Пример
Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.
У меня есть элемент изображения, который я хочу изменить при нажатии.
Но то, что мне нужно, это:
Но это не работает, очевидно. Можно ли вообще иметь onclick поведение в CSS (т.е. без использования JavaScript)?
:active работает, когда мышь не работает. В зависимости от того, что вы пытаетесь сделать, вы можете заставить его работать, используя псевдокласс CSS4 :target .
:target не является новым для Селекторов 4. Он был доступен начиная с Селекторов 3, который на момент написания уже был рекомендацией в течение года.
Самое близкое, что вы получите :active :
Однако этот стиль будет применяться только тогда, когда нажата кнопка мыши. Единственный способ применить стиль и оставить его примененным по клику - это использовать немного JavaScript.
Лучший способ (на самом деле единственный способ *) имитировать фактическое событие нажатия, используя только CSS (вместо простого наведения на элемент или активизации элемента, когда у вас нет mouseUp ), - использовать хак с флажком . Это работает путем присоединения label к элементу через for="" атрибут метки .
Эта функция имеет широкую поддержку браузера ( :checked псевдокласс IE9 +).
Базовая демонстрация взлома флажков (базовая структура кода для того, что вы спрашиваете):
Демонстрация для имитации эффекта нажатия кнопки, сверх того, что вы просите:
Большая часть CSS в этой демонстрации предназначена только для стилизации элемента label. Если вам на самом деле не нужна кнопка , и достаточно старого элемента, тогда вы можете удалить почти все стили в этой демонстрации, аналогично моей второй демонстрации выше.
Вы также заметите, что у меня есть одно свойство с префиксом -moz-outline-radius . Некоторое время назад Mozilla добавила это удивительное неспецифическое свойство в Firefox, но ребята из WebKit решили, что , к сожалению, добавлять его не собираются . Так что считайте эту линию CSS просто прогрессивным улучшением для людей, которые используют Firefox.
Потрясающие! Но есть ли способ отменить изменения также при нажатии в другом месте, кроме кнопки ввода / изображения /? Я использовал ваш пример для создания всплывающего поля и хочу, чтобы оно исчезло, когда посетители нажимают на пустую страницу. Спасибо!
Вы можете использовать псевдокласс :target для имитации события нажатия, приведу пример.
Стоит отметить, что это ограничено только гиперссылкой, поэтому, если вам нужно использовать другую ссылку, например, гиперссылку, например кнопку, вы можете немного ее взломать, например, стилизовать гиперссылку, чтобы она выглядела как кнопка.
Если вы дадите элементу a, tabindex то вы можете использовать :focus псевдокласс для имитации щелчка.
HTML
CSS
это работает достаточно хорошо! при использовании tabindex=-1 элемент все еще может быть сфокусирован, но только мышью, а не клавиатурой, что лучше в этом случае. Вы также можете использовать outline:0 стиль, чтобы убрать синюю рамку, когда сфокусированы
Изменить: Ответил, прежде чем ОП уточнил, что он хотел. Следующее предназначено для onclick, похожего на javascripts onclick, а не для :active псевдокласса.
Это может быть достигнуто только с помощью Javascript или Checkbox Hack
Вы также можете включить свои данные внутри метки, чтобы вам не приходилось использовать id атрибуты для их связывания.
TylerH сделал действительно хороший ответ, и мне просто пришлось обновить эту последнюю версию кнопки.
Приятно: активные стили; то, что я собирался, но был немного спешил, когда выстраивал их внешний вид.
Как насчет чистого решения CSS без хакерства?
@TylerH имеет отличный отклик, но это довольно сложное решение. У меня есть решение для тех из вас, кто просто хочет простой эффект "onclick" с чистым CSS без множества дополнительных элементов.
Мы просто будем использовать CSS-переходы. Вы могли бы сделать то же самое с анимацией.
Хитрость заключается в том, чтобы изменить задержку перехода, чтобы она продолжалась, когда пользователь щелкает.
Здесь я также добавляю класс "clicked", чтобы javascript мог также обеспечить эффект, если это необходимо. Я использую фильтр теней 0px, потому что он выделит прозрачную графику синим цветом для моего случая.
Это позволяет мне настроить его так, чтобы, когда пользователь нажимает кнопку, он подсвечивался синим цветом, а затем медленно исчезал (вы, конечно, могли бы использовать и другие эффекты).
Хотя вы ограничены в том смысле, что анимация для выделения является мгновенной, она все же обеспечивает желаемый эффект. Скорее всего, вы могли бы использовать этот трюк с анимацией для получения более плавного общего перехода.
ПОЭТОМУ сложность - это то, что необходимо для создания постоянного эффекта щелчка. Если вы просто хотите временно сделать что-то, что не сохраняет свое состояние, это или многие другие решения подойдут, и я согласен, что определенно менее сложный.
Согласовано. Все, что вам нужно, чтобы конечный результат был и всегда было полезно знать все варианты. Это отличная тема для тех, кто точно. Вероятно, стоит целая средняя статья, рассказывающая о каждой из них и о преимуществах каждой из них!
Хорошо, это может быть старый пост . но был первый результат в Google и решил сделать свой собственный микс на этом как ..
В первую очередь, я буду использовать фокус
Причина в том, что это хорошо работает для примера, который я показываю, если кто-то хочет событие типа мыши, тогда используйте active
Итак, почему я публикую это в старой ветке, хорошо, потому что примеры здесь различаются, и я подумал предоставить один обратно сообществу, которое является рабочим примером.
Как уже ответил создатель потока, они хотят, чтобы эффект длился только во время события click. Теперь, хотя это не точно для этой необходимости, его закрыть. active будет анимироваться, пока мышь не нажимает, и любые изменения, которые вам нужны, должны длиться дольше с помощью javascript.
Для всех, кто читает, в любом случае, чтобы заставить его переключаться? Или это слишком много спрашивает из CSS LOL?
Насколько я знаю, фокус / активный / наведение примерно настолько близок, насколько вы можете получить с помощью css. Возможно, вы сможете сделать что-то необычное с опцией / выбрать тип кода. Но пока не пробовали / не нуждались в этом
Предупреждение! Особенно простой ответ ниже! :)
Так что взгляните на ответы Bojangles и TylerH, если они вам подходят, но если вы хотите получить простой и CSS-ответ, который оставит блок видимым после нажатия (и даже может заставить блок исчезнуть при последующем щелчке), затем увидеть это решение.
У меня была похожая ситуация, мне нужно было всплывающее окно div с onClick, где я не мог добавить JS или изменить разметку / HTML (действительно решение CSS), и это возможно с некоторыми предостережениями. Вы не можете использовать трюк: target, который может создать приятное всплывающее окно, если вы не можете изменить HTML (чтобы добавить 'id'), чтобы его не было.
В моем случае всплывающий элемент div содержался внутри другого элемента div, и я хотел, чтобы всплывающее окно отображалось поверх другого элемента div, и это можно сделать с помощью комбинации: active и: hover:
Пример (а также тот, который позволяет нажать на всплывающее окно, чтобы оно исчезло) по адресу:
Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.
Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на JavaScript, но на самом деле, в данном случае, событие click легко обработается через CSS.
Для начала самый обычный HTML-код:
Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код:
.tabs /* Все вкладки располагаем в одну строку */
margin: 10px; /* Отступы вкладок друг от друга */
>
.content display: none; /* Скрываем содержимое */
padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */
position: absolute; /* Чтобы содержимое не двигало элементы на странице */
>
.tabs:active .content display: block; /* Когда кликаем по вкладке, открываем содержимое content */
>
.content:hover display: block; /* Пока курсор наведён на контент, не закрываем его */
>
Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active, но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит "держать" контент наведение курсора.
Данный алгоритм можно использовать для простых вкладок, а также для выпадающих по клику меню. Теперь, надеюсь, Вы подобные задачи будете решать без использования JavaScript, что всегда хорошо.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 5 ):
Михаил, спасибо за урок. Очень полезная для меня статья !
А у меня почему-то не работает ничего, если поставить :hover то всё работает а если :active или :focus то ничего не работает
padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */ - не верно, содержимое ниже названия!
Спасибо за статью, все проверил, отлично работает! Еще классная штука для создания клика без прямого использования JavaScript. OrnaJS. Пример:
Читайте также: