使用选项卡开始单击 div 并输入

Question

我有一个和 div 元素

<a href="javascript:void(0)">link</a>

<div tabindex="0">div</div>

点击事件处理程序

$("a").on("click",function(){
   alert(" a click")

});

$("div").on("click",function(){
    alert("div click")

});

使用键盘选项卡我可以导航到一个链接，按 Enter 并查看警报，但我不能为 div 执行此操作。

是否可以像为标签一样启动 div 的点击事件，而不使用任何其他事件（按键）？

JSfiddle

Answer 1

我知道这是一篇旧帖子，但我想我可能会添加一些内容。

PeterKA 有一个不错的解决方案，但我会稍微改进一下。
而不是触发像enter 这样的新自定义事件，只需触发click 事件。这样，您无需修改​​现有代码并将新事件添加到您拥有的每个侦听器。
每个监听click 的元素都会被触发。

$('.btn').on("click",function(){
    alert("div click")
})

// at a centrelized spot in your app
$('.btn').on('keypress', function(e) {
    if(e.which === 13) {
      $(this).trigger('click');
    }
});

$(document).ready(function(){
  $('#firstDiv').focus(); // just focusing the first div
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv" class="btn" tabindex="0">div</div>

<div class="btn" tabindex="0">div</div>

<div class="btn" tabindex="0">div</div>

Answer 2

您可以像这样创建自定义事件：

$("div").on("click enter",function(){
    alert("div click")

})
.on('keypress', function(e) {
    if(e.which === 13) {
        $(this).trigger( 'enter' );
    }
});

DEMO