Question

[仅供参考：我不能改变标记的方式。将点击div ..而不是按钮或锚]

我有一个菜单（应该传递可访问性标准），点击后会打开它的子菜单。

这是onclick功能，我需要在按回车键时执行相同的功能，

 // parent menu (this will repeat)        
    <div onclick="javascript:ToggleMenu('Calendar');" class="menu-item" style="cursor: hand;" tabindex="2">
        <p>Calendar</p>
        </div>

//submenu (this will repeat)
            <div id="Calendar" class="menu-subitem" style="display: none;" tabindex="2">


            <a onclick="Audit(this)" tabindex="2" href="Calendar/CalendarAssignment.aspx" id="TM_C1">Calendar Assignment</a>
             <a onclick="Audit(this)" tabindex="2" href="Calendar/ShiftAssignment.aspx" id="TM_C2">Shift Assignment</a>
            </div>

谢谢！我尽力让自己明白了！

Answer 1

这是可访问的解决方案，同时保留div：

<div id="foo" role="button" tabindex="0">Toggle menu</div>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    }).keydown(function(e) {
        if (e.which === 32 || e.which === 13) {
          this.click();
        }
    });
</script>

但老实说，你应该使用button：

<button id="foo">Toggle menu</button>

<script>
    $('#foo').click(function() {
        ToggleMenu('<%# Container.DataItem.FuncID %>');
    });
</script>

Answer 2

当他们点击页面上任何地方的回车键时都会这样做

<div onclick="javascript:ToggleMenu('<%# Container.DataItem.FuncID %>');">
<script>
    document.addEventListener("keypress", function (evt)
    {
        if (evt.keyCode === 13) {
            //they pressed enter

            //now get the divevent
            var div = document.querySelector('div[onclick*="ToggleMenu"]');
            //trigger the event
            div.onclick.apply(div);
        }
    }
    );
</script>

Answer 3

我可以看到你的代码中有错误

onclick"javascript:xxxx"

不正确，

"javascript:xxx"

应该使用＆＃34; a＆＃34;标签＆＃34; href＆＃34;属性，只需删除＆＃34; javascript：＆＃34;在你的onclick属性中，你可能得到你想要的东西。

如何通过使用内联javascript按Enter来触发onclick？

3 个答案: