Блог

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

 <a href="javascript:togglePanels()">Toggle Panels</a>
  

или

 <a onclick="togglePanels()" href="javascript:void(0);">Toggle Panels</a>
  

или

 <span onclick="togglePanels()">Toggle Panels</span>
  

Или есть вариант получше, который я не включил?

Я бы использовал <button> . Вы можете оформить его соответствующим образом с помощью CSS, но семантическое значение по-прежнему сохраняется.

Но если пользователь отключает JavaScript, кнопка становится бесполезной, и пользователи могут запутаться.

Если ваш сайт в любом случае работает только с JavaScript, то это было бы нормально, но если он работает и без, вам лучше добавить его программно или изначально скрыть с помощью CSS.

Обновить:

Не забудьте установить type="button" . По умолчанию кнопка — это кнопка отправки формы, поэтому отсутствие type атрибута сделало бы его каким-то недопустимым вне формы (хотя он все равно работал бы).

Обычный подход с прогрессивным улучшением заключается в том, чтобы сделать вашу привязку фактической привязкой … если JS недоступен, щелчок по ссылке просто выведет панели (которые вы можете разместить внизу, в потоке документа, и скрыть при dom-ready / load, когда JS доступен) наверх.

 <a href="#panels" id="panelToggler">Toggle Panels</a>

<div id="panels"><!-- your panels--></div>
  

Затем в вашем обработчике щелчков для #panelToggler сначала используйте e.preventDefault(), чтобы он не пытался вытащить привязку наверх, затем включите логику для переключения панелей.

Если вас не волнует, что пользователи без JS могут использовать все, что находится на панелях, тогда даже не показывайте им элемент управления переключением панелей вообще. Даже если это не похоже на ссылку, действительно неудобно просто иметь в вашем пользовательском интерфейсе нерабочую строку текста «переключать панели». В этом случае действительно не имеет большого значения, на какой элемент вы устанавливаете функциональность для пользователей с поддержкой JS… button подходит, но a обычно более гибок в выборе стиля. Взгляните на большинство кнопок в GMail … они представляют собой скопления вложенных div кнопок.

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

Лучшим вариантом было бы использовать ненавязчивый JavaScript:

 var element = document.getElementById("#anchorId");
element.onclick = togglePanels;
  

Подход jQuery также очень помогает:

 $("a").click(togglePanels);
  

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

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

По-настоящему идеальным ненавязчивым решением было бы вообще не включать элемент в разметку и добавлять его программно, используя JavaScript.

По крайней мере, вы не должны использовать javascript: протокол в ссылке на гиперссылку. Помимо проблем, которые некоторые могут посчитать неправильным использованием гипертекстовых ссылок (гиперссылки должны ссылаться на документы или ресурсы, а не определять поведение), это создает несколько технических проблем; например, у вас нет доступа к элементу привязки через this .

Я узнал, что привязка сделает браузер «готовым к запуску», когда он сфокусирован. Это означает, что будут использоваться некоторые ресурсы. Но я думаю, что прозрачность важна: http://www.javascripttoolbox.com/bestpractices/#onclick

Майк