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

Question

[仅供引用:我不允许更改其标记方式。 div 将被点击..不是按钮或 anchor ]

我有一个菜单(应该传递辅助功能标准)，单击时将打开其子菜单。

这是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 id="foo">Toggle menu</button>

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