» » HTML | Правильный onClick

HTML | Правильный onClick

 onСlick – это событие № 1 на экране пользователя.
onСlick – это клик (или щелчок) пользователя по объекту.
После каждого такого onclick-а пользователя, должно происходить ответное действие на экране. Так достигается интерактивность интерфейса и подтверждается главный принцип общения компьютера с человеком – клик, ответ, клик, ответ.
На пользовательском жаргоне, событие onСlick может назваться как угодно. Как только рядовые пользователи не называют этот бедный onСlick – клацнуть, дёрнуть, кликнуть, щёлкнуть, бацнуть и т.д. … Но, суть от этого не меняется годами – если пользователь проявил активность на экране и кликнул по объекту, то – компьютер должен ему (пользователю) адекватно ответить. Это и есть onСlick.

onclick в HTML

Событие onСlick в любом языке имеет первостепенное значение. И, HTML сему не исключение. Оно и вестимо. Действительно, уж если после клика (onСlick) по элементу в браузере ничего не происходит – зачем тогда вообще, что-либо программировать на сайте? Так что, onСlick – желанный гость на любом интернет-экране (или экранчике).
Теперь, ближе к теме. Если говорить более конкретно, то наш onСlick по страничке сайта, в браузере – это событие из Ява-скрипт, для которого HTML служит всего лишь каркасом размещения кода его конструкций. И, с точки зрения валидности кода этого самого HTML – правильно будет писать onclick, а не onСlick (как привыкли многие прикладные программисты). Потому что, в HTML все теги и конструкции пишутся только в нижнем регистре.

Нет верхнего регистра в HTML. Нет, и всё тут!!! А тем «злыдням», которые пишут в HTML в верхнем регистре, в старые добрые времена было принято рубить руки по самые колени. Более того. Говорят, что при батюшке-царе Иоанне Грозном, за запись в HTML, вида <DIV></DIV> или <SPAN></SPAN> можно легко было угодить, если не на кол, так на виселицу. Это абсолютно точно. Щас, конечно – царедворцы и правители пошли поспокойнее. Тем не менее, при написании любого кода нужно соблюдать, хотя-бы видимость приличия. С этого места и начинается повествование о правильном онклике.

Итак, решено и доказано (для HTML).
Первым делом, пишем onclick, а не onСlick !!!

Далее, код стандартного способа вызова события onclick Ява-скрипт в HTML имеет вид:

<a title="МЕНЮ №1" href="javascript://" onclick="ФУНКЦИЯ;return false;">МЕНЮ №1</a>
или
<button title="МЕНЮ №1" onclick="ФУНКЦИЯ;">МЕНЮ №1</button>

Что означают сии бредовые строчки, мы будем разбираться несколько позже, а пока…
– Принципиально, событие onclick из Ява-скрипт в HTML можно навесить на любой элемент кода HTML-страницы, будь то <div>, <p> или <ol>. Браузер всё «сожрёт», и всё будет работать. Вот только, доступ к элементу с клавиатуры возможен исключительно для ссылко- или кнопко- объекта. И, если предположить на мгновение, что у пользователя нет мыши и он работает исключительно с клавиатуры, то всё к чему он сможет соприкоснуться на сайте – это будут только кнопки или ссылки. Третьего не дано! Поэтому, «навешивать» событие onclick на объекты, недоступные с клавиатуры – просто некрасиво. Ну, не по-человечески, как-то это. Из сего выплывает второе правило для onclick в HTML – это событие нужно подключать только к ссылке (тег «а») или к кнопке (тег «button»). В противном случае, код работать всё-таки будет, но в аду, для таких программистов – заготовлена отдельная большая сковорода.
Поскольку, (в HTML) форматирование и работа с кнопками («батонами») вызывает определённые трудности, то единственным, универсальным и оптимальным вариантом остаётся только ссылка (тег «а»). Но, и с этим тегом – не всё так гладко. Теперь, возвращаемся к разбору с нашей строчкой кода:

<a title="МЕНЮ №1" href="javascript://" onclick="ФУНКЦИЯ;return false;">МЕНЮ №1</a>

Выбрасываем из обсуждения тайтл ссылки, как совершенно очевидную вещь. Остаётся,
<a href="javascript://" onclick="ФУНКЦИЯ;return false;">МЕНЮ №1</a>
Вся дальнейшая писчая лабуда будет связанна с темой блокировки атрибута href, который нужно правильно «парализовать», чтобы ссылка перестала быть рабочей ссылкой, но тем не менее – выполняла функции onclick.

return false;

return false; – это прямая блокировка атрибута href. Если у пользователя в браузере разрешён Ява-скрипт, то будет выполнен вызов события onclick из соответствующего скрипта, а не переход по ссылке. Т.е., чтобы при клике по «ссылке вызова» не было сразу перехода по адресу из href, в onclick добавляется событие return false; и предполагается, что сначала исполнится функция, которая отменит переход по ссылке, если javascript включен. Таким образом, содержание атрибута href не имеет никакого значения, поскольку оно игнорируется при выполнении ява-скрипта.

Но вот вопрос. А что будет, если у пользователя в его браузере запрещён (выключен) Ява-скрипт? Как тогда поведёт себя наша ссылочка? Не буду интриговать, а сразу выложу возможные варианты развития событий – возможные значения атрибута href и соответствующего поведения браузера после клика по такой ссылке при выключенном Ява-скрипт.
Конечно, если javascript выключен в браузере у пользователя – так это одна беда и неурядица. Если выполнение Ява-скриптов выключено (запрещено) в браузере у пользователя, то тогда начинаются сплошные проблемы с атрибутом href, поскольку тег «а», это – всё-таки ссылка и браузер будет пытаться осуществить по ней переход.

Совсем выкинуть атрибут href из состава ссылки нельзя. Без атрибута href в тексте ссылке обойтись никак не возможно и любой валидатор сразу обидится за такое надругательство над её пряным и нежным телом. Значит, тогда остаётся один единственный вариант – наполнить атрибут href удобоваримым содержимым. Тут возможно следующее: оставить href совершенно пустым, заполнить его знаком диеза «#» или выражением javascript://. При выключенном (или заглюканном) Ява-скрипт, после клика по таким ссылкам будет происходить следующее:

<a href="" onclick="ФУНКЦИЯ; return false;">Проба</a>
Атрибут href пустой. После клика по такой ссылке, будет просто перезагружена страница в браузере.
<a href="#" onclick="ФУНКЦИЯ; return false;">Проба</a>
Атрибут href имеет значение "#". После клика по такой ссылке, пользователя выбросит в начало страницы, без её перезагрузки.
<a href="javascript://" onclick="ФУНКЦИЯ; return false;">Проба</a>
Атрибут href имеет значение "javascript://". После клика по такой ссылке, ничего не произойдёт. href="javascript://" – клик по ссылке будет просто проигнорирован браузером. Значение "javascript://" для атрибута href – это и есть стандартная «заглушка» для блокировки ссылки при выключенном Ява-скрипте.

href="javascript://" – туфта!

Почему туфта? Потому что, интернет-жизнь в мире поисковых систем вносит свои коррективы. С точки зрения правильной и семантической! вёрстки, абсолютно логичным будет записать в атрибут href реальную ссылку и добавить реальный тайтл для этой ссылки. Тогда, после клика по такой ссылке произойдёт одно из двух: либо, будет выполнено событие onclick из соответствующего Ява-скрипта, либо состоится переход по реальной ссылке на реальную страницу, (если Ява-скрипт отключён или заглюкал/недогрузился).

Таким образом, подведём итоги. В ссылке вызова события Ява-скрипт, в href помещаем реальную ссылку на реальную страницу для перехода при выключенном javascript, а в onclick – функцию, вызывающую запрос выполнения скрипта при включённом Ява-скрипт.

Иными словами, в «href» должна находиться совершенно нормальная и рабочая ссылка на любую веб-страницу, куда будет перенаправлен пользователь при клике по «ссылке вызова события» при выключенном Ява-скрипт, и которая будет игнорироваться скриптом при включенном Ява-скрипт. Вот и всё …

Ну, и под конец –

Проверка браузера на включение/выключение Ява-скрипт

Стандартный код такой проверки выглядит так:
<noscript><span class=”predupregdenie”>У Вас отключён javascript...</span></noscript>
Где, для <span class=”predupregdenie”> можно прописать в CSS любые стили, кроме display:none; и ему подобных стилей ... Браузер ОБЯЗАТЕЛЬНО!!! выведет это сообщение на экран, в случае отключения пользователем Ява-скрипта в своём браузере. Таким нехитрым способом, Web-мастера часто пишут: "Включите, пожалуйста, javascript", либо выводят какие-то красивые картинки с аналогичной просьбой, либо ещё что-нибудь... Внутри тега noscript можно помещать любые HTML-теги. И, это – вовсе не лишняя предосторожность. Несмотря на то, что сейчас не так просто найти сайт, который бы вообще не использовал javascript.

Кто не с нами, тот против нас
Проблему с выключенным в браузере Ява-скрипт можно, вообще – решить радикально и кардинально. Например, добавить внутрь секции <head> код HTML5, вида:

<noscript>
<meta http-equiv="Refresh" content="0; http://mysite.ru/" />
</noscript>
где, http://mysite.ru/ – это веб-страница, куда сразу перенаправляется
пользователь при выключенном в браузере Ява-скрипт.

Ключевые слова статьи: HTML сайт интернет

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив