Жизнь без алкоголя запойного алкоголика | Родная душа – статьи, компьютер, Интернет | Создание, оптимизация сайтов, блогов | HTML, CSS, ява-скрипт.

Интернетчик » HTML » HTML | Правильный onClick

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

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

На пользовательском жаргоне, onclick-ом называется – клацнуть, дёрнуть, кликнуть, щёлкнуть, бацнуть, тапнуть … Суть явления не меняется. Пользователь проявил активность, «тиснул» объект на экране – компьютер адекватно ответил. Это и есть onСlick.

onclick в HTML

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

Нет верхнего регистра в HTML. Поговаривают, батюшка-царь на кол сажал за записи, вида <DIV></DIV> или <SPAN></SPAN>. Нынешние правители поспокойнее.

Повествование о правильном онклике

Нет повести печальнее на свете, чем повесть об онклике в интернете...
Решено: пишем в коде onclick (не onСlick)

Код стандартного способа вызова события onclick Ява-скрипт в HTML:

<a title="тайтл ссылки" href="jаvascript://" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>
или
<button title="тайтл кнопки" onclick="ФУНКЦИЯ;">отображаемый текст</button>

Принципиально, событие onclick из Ява-скрипт в HTML вызывается на любой элемент HTML-страницы: <div>, <p>, <ol>... Браузер всё «сожрёт».

Логично цеплять onclick на элементы, не содержащие внутри частей текста, пригодных для частичного копирования – рисунки (img), кнопки (button) и ссылки из одного слова или многословные, но соединенные неразрывным пробелом.

HTML-форматирование и работа с кнопками («батонами») вызывает определённые трудности. Еединственно универсальным и оптимальным вариантом остаётся ссылка (тег «а»).

Возвращаемся к разбору строки кода:

<a title="тайтл ссылки" href="jаvascript://" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>

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

<a href="jаvascript://" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>
Дальнейшая лабуда связана с блокировкой атрибута href, который нужно правильно «парализовать», чтобы ссылка перестала быть рабочей ссылкой, но тем не менее – выполняла функции onclick.

return false;

return false; – блокировка атрибута href. Если у пользователя в браузере разрешён Ява-скрипт – исполнится вызов события onclick из соответствующего скрипта, а не переход по ссылке.

Чтобы при клике по ссылке вызова не было сразу перехода по адресу из href, в onclick добавляется событие return false;. Предполагается, что первой исполнится функция, отменяющая переход по ссылке, если jаvascript включен. Содержание атрибута href не имеет никакого значения, поскольку игнорируется при выполнении ява-скрипта.
Если jаvascript выключен, то начинаются проблемы с атрибутом href, поскольку тег «а»,
это – всё таки ссылка.
Можно оставить href совершенно пустым, наполнить знаком #, как вариант – выражением jаvascript://:

<a href="" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>
<a href="#" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>
<a href="jаvascript://" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>

Соответственно, при выключенном ява-скрипт:
пустой href – перезагрузит страницу,
href="#" – отбросит пользователя в начало страницы,
href="jаvascript://" – клик проигнорирован.
С точки зрения правильной семантической вёрстки, абсолютно логично записать в href реальную ссылку и добавить адекватный тайтл к ней.

Содержание атрибута href не имеет никакого значения при включенном ява-скрипт и выходит на первый план – при выключеном.

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

<a href="" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>

Атрибут href пустой. Перезагрузка страницы в браузере.

<a href="#" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>

Атрибут href имеет значение "#". Переход в начало страницы, без её перезагрузки.

<a href="jаvascript://" onclick="ФУНКЦИЯ;return false;">отображаемый текст</a>

Атрибут href наполнен выражением "jаvascript://". Клик проигнорирован браузером. Значение "jаvascript://" для атрибута href – стандартная «заглушка» для блокировки ссылки при выключенном Ява-скрипте.

href="jаvascript://" – туфта!

С точки зрения семантической! вёрстки, абсолютно логично записать в атрибут href реальную ссылку и добавить реальный тайтл для этой ссылки. Тогда, после клика по такой ссылке произойдёт одно из двух:

  • выполнено событие onclick из соответствующего Ява-скрипта
  • переход по реальной ссылке на реальную страницу (если Ява-скрипт отключён/недогрузился).

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

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

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

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

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

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

 HTML
Комментарии (1)
tehnopost.info
Гость3 апреля 2019 08:02

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


$(document).ready(function () {
$(".hs-menubar").hsMenu(); 
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
}); 

$(document).click(function(event) { 
$target = $(event.target);
if(!$target.closest('.hamburger').length && 
$('.hamburger').toggleClass("is-active"));
});


ЦитироватьОтветить

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

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

Юзер панель

ТОП контент

Записки алкоголика - уроки, статьи, советы. Cознание продвижения. Вино, водка, пиво - плохо! Сайт, блог, Интернет - хорошо! HTML, CSS, Ява-скрипт.