HTML элементы JavaScript перехватывает

Question

Большая часть моей жизни развития, я сделал генерируемый кнопку JavaScript следующим образом:

<span>Open/hide</span> 

С помощью CSS, как

span { 
    cursor: pointer; 
} 

Это, казалось, работал для меня, и ИМО , он выглядит и выглядит лучше, чем

<a href="(#|javascript:void(0);|javascript:;|return false)">open/hide</a> 

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

Есть ли способ получить лучшее из обоих миров? То есть, кнопка, которая может быть введена в закладки, доступна для чтения с экрана, а также не подразумевает семантическую ссылку на другой документ, и не нужно использовать хакерские способы остановить ссылку из любой точки?

Примечание: они предназначены только для вставленных кнопок JS, а не для существующих ссылок, изменение их поведения с помощью JS.

Answer 1

То есть кнопка, которая может быть вкладками к, доступной для чтения с экрана, а также не предполагает семантическую ссылку на другой документ

Да, и, как ни странно, это называется именно так: <button>. Или <input type="button">, если вам нужен только текстовый контент. Затем вы можете добавить к нему нагрузку CSS, чтобы остановить его, как если бы вы предпочитали кнопку формы по умолчанию.

Одной из проблем является IE, которая добавляет дополнительные пару пикселей неустранимого дополнения к виджетам кнопок и перемещает содержимое кнопки вниз и вправо на один пиксель при нажатии. Часто это не имеет значения.Если вам не нужно нулевое дополнение, вы также можете компенсировать добавлением дополнений во все браузеры, кроме IE.

Другой семантически звуковой способ заключается в использовании <input type="image">, хотя это явно требует, чтобы контент был изображением. Опираясь на текст alt вместо этого, не работает из-за того, что IE создает изображения сломанных изображений.

Хотя кнопки семантически являются наиболее подходящим элементом, если вы не хотите эту проблему с дизайном, вы можете продолжать использовать пробел или другой бессмысленный элемент (например, SO), но, по крайней мере, улучшить доступность клавиатуры, это значение tabindex. Затем он будет сфокусирован как ссылка, но, к сожалению, вам потребуется дополнительный скриптинг, если вы хотите сделать его активируемым с клавиатуры (уловить хотя бы код нажатия 13 и 32). Вы также можете наметить такой элемент как кнопку с ARIA для обеспечения доступности, хотя, честно говоря, я не уверен, что это действительно полезно для сегодняшнего набора инструментов.

Иногда, когда действие связано с другим элементом на странице, например с предлагаемой кнопкой «открыть/скрыть», мне представляется законным использовать внутреннюю ссылку на этот элемент. (С JS назначенный onclick хотя, не какой-либо из этого встраиваемого JS или ужасающих javascript: псевдо-URL.)

.hidden { display: none; } 

<a href="#foo" class="toggler">open/hide</a> 
<div id="foo"> blah </div> 

for (var i= document.links.length; i-->0;) 
    if (document.links[i].className==='toggler') 
     document.links[i].onclick= toggle; 

function toggle() { 
    var el= document.getElementById(this.hash.substring(1)); 
    el.className= el.className==='hidden'? 'hidden' : ''; 
} 

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

Answer 2

Кажется делает

<span tabIndex="n">foo</span> 

позволяет закладке его. Однако нажатие на ввод, когда оно сосредоточено, не имитирует щелчок. Который, я думаю, легко исправляется, помещая на него событие keydown.

Answer 3

Я бы сказал, что кнопка соответствует вашим требованиям ...

<input type="button" class="js_button" value="Javascript Button" /> 

CSS:

.js_button, .js_button:active, js_button:focus { 
    background-color: #FFF; 
    border: none; 
    margin: 0 0; 
    padding: 0 0; 
} 

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

Answer 4

Вы можете ссылаться на любой объект на странице, если вы предоставите id или name элемента.

Например:

https://stackoverflow.com/questions/1659137/html-elements-for-javascript-hooks#comments-1659137 

HTML elements for JavaScript hooks