我需要帮助来修复以下情况。
我有一个用图像包裹的 div。当我在 div 部分上单击鼠标时,将显示一个小工具提示模式以显示地址。 (想象这个例子在 map 上有数字,点击数字会弹出地址)。
为了与键盘导航具有相同的行为,我为 div 提供了 tabindex="0"。
现在我可以到达 div ,但是当我通过按 enter/空格键单击时,我无法查看工具提示模式。
按键事件也不起作用
任何人都可以帮助我解决问题的根本原因。一个例子会更容易理解更好
最佳答案
因为您可能正在使用默认情况下与 click 事件一起使用的工具提示插件,但您还需要 keyboards events使其与 enter/spacebar 一起工作。
现在,也许那个插件也支持它们,如果你能告诉我们我们会找到哪个 ;)
无论如何,一个通用的解决方案是
- 将键盘事件附加到您的 div
- 在用户按下回车键/空格键时捕获
- 触发点击
试试这段代码:
$('#target').on('keyup', function(e){
//13 = Enter key, 31 == Spacebar key
if(e.keyCode == 13 || e.keyCode == 32) $(this).click();
})
请看这个例子:JSFIDDLE
关于javascript - Tabindex 不适用于 div 元素打开模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640238/