使用选项卡启动单击div并输入

时间:2014-12-02 16:30:00

标签: javascript jquery html focus

我有一个和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的click事件与标记相同,而不使用任何其他事件(按键)?

JSfiddle

2 个答案:

答案 0 :(得分:3)

您可以创建如下自定义事件:

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

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

DEMO

答案 1 :(得分: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>