1

我有一个带点的侧面导航（点击滚动的每个点都可以锚定页面）。

出于可访问性的目的，我希望用户能够通过点来标记。我已经设置了一个<span>元素来包装每个点的锚点，并且 tabindex 工作正常，但是..

我希望当他们在导航元素上选项卡时触发点击事件。即：如果他们点击到点 2，它应该模仿点击事件，以便将他们带到那个锚点。

可能的？

4

1 回答 1

1

如果我理解正确，我认为您应该能够通过侦听点上的“焦点”事件并在收到点时模拟单击点来解决您的问题。有几种方法可以做到这一点，具体取决于您使用的框架（如果有）。例如，如果您正在使用 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>
于 2013-07-02T03:57:52.220 回答