Tabindex для элементов javascript

У меня есть боковая навигация с точками (каждая из этих точек при нажатии прокручивается, чтобы привязать страницу).

В целях доступности я бы хотел, чтобы пользователи могли перемещаться по точкам. Я установил элемент <span>, чтобы обернуть якоря каждой точки, и tabindex работает нормально, однако.

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

Возможный?


javascript html tabindex
person DT.DTDG    schedule 02.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понимаю, я думаю, что вы сможете решить свою проблему, прослушивая событие «фокус» на точках и имитируя щелчок по точке, когда вы ее получаете. Есть несколько способов сделать это, в зависимости от того, какие фреймворки (если они есть) вы используете. Например, если вы работаете с jQuery и точки идентифицируются с помощью класса «точка»:

$('.dot').focus(function(e) {
    e.target.click();
}

Вот небольшая тестовая страница, которую я собрал — похоже, она работает как в IE10, так и в Chrome:

<html>
    <head>
        <script type="text/javascript">
            function handleOnLoad() {
                var elems = document.getElementsByTagName("span");
                var i;
                for (i = 0; i < elems.length; ++i) {
                    elems[i].onfocus = function(event) {
                        if (event.target) {
                            event.target.firstChild.firstChild.click();
                        }
                        else if (event.srcElement) {
                            event.srcElement.firstChild.firstChild.click();
                        }
                    }
                }
            }
        </script>
    </head>
    <body onload="handleOnLoad()">
        <span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll1">Foo</a></ul></span>
        <span class="focus" tabindex="2"><ul class="inactive" tag="scroller"><a href="#scroll2">Bar</a></ul></span>
        <span class="focus" tabindex="3"><ul class="inactive" tag="scroller"><a href="#scroll3">Baz</a></ul></span>
        <span class="focus" tabindex="4"><ul class="inactive" tag="scroller"><a href="#scroll4">Ban</a></ul></span>
    </body>
</html>
person Ben S.    schedule 02.07.2013
comment
Спасибо, Бен, я коротко расскажу об этом. - person DT.DTDG; 03.07.2013
comment
Эй, @Ben S. это не совсем сработало :/ У меня есть span, окружающий якорь, чтобы к нему можно было перейти. Мой HTML - это <span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll" style="opacity:0;">O</a></ul></span> - так как я могу установить щелчок по якорю внутри ul, когда он фокусируется на span, который его окружает? - person DT.DTDG; 03.07.2013
comment
Похоже, это должно работать, если вы измените e.target.click(); на $('a', e.target).click();. Если вы знаете, что в вашей разметке не будет пробелов, e.target.firstChild.firstChild.click(); также должен работать, если вы не хотите выполнять еще один запрос. - person Ben S.; 03.07.2013
comment
Я добавил к своему ответу небольшую тестовую страницу, на которой более подробно показана версия решения. Мне показалось, что в IE10 и Chrome все работает нормально. Видите ли вы какие-либо ошибки JavaScript в консоли или другие вещи, которые могут помочь определить, что происходит не так? - person Ben S.; 03.07.2013
comment
Насколько я могу судить, что-то в том, как работает JSFiddle, означает, что функция handleOnLoad() не вызывается, поэтому она не устанавливает обработчики onfocus. Если я добавлю в handleOnLoad() что-то, что должно иметь явно видимый эффект, например изменение имен ссылок, я не вижу, чтобы это произошло, и когда я проверяю содержимое фрейма с помощью отладчика, обработчики onfocus не видят быть там. Когда я пробую это в автономном режиме (то есть простой файл HTML, который я открываю в браузере), кажется, что это работает. - person Ben S.; 03.07.2013
comment
Только что попробовал это в плоском файле HTML и все еще не работает. Используя Фаерфокс. Вы можете загрузить демонстрацию html? :/ Извините. - person DT.DTDG; 04.07.2013
comment
давайте продолжим обсуждение в чате - person Ben S.; 04.07.2013