启动单击格使用标签和输入

我有一个和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

来源

2014-12-02 cosset

并非所有的浏览器都支持'的tabindex = 0'的div的 - 它是不允许在W3C recommondation，记住这一点！正如马丁所说：http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex – 2014-12-02 16:33:21

。一切都需要包装在链接标签中，以便通过标签访问。这是一个可访问性的惯例。 – 2014-12-02 16:35:19

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

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

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

DEMO

来源

2014-12-02 16:37:39 PeterKA

我没有使用任何其他事件（按键）编写。 – cosset 2014-12-02 16:39:13

糟糕，没有看到......为什么你有这个要求的任何特定原因？ – PeterKA 2014-12-02 16:40:31

在我的应用程序中，我有一些div，跨度，有点击事件，并根据新的要求，我需要aceess到其使用标签并enter.I知道我把它包装到一个标签，但它会改变很多代码 – cosset 2014-12-02 16:45:44

我知道这是一个老的文章，但我想我可能添加的东西。

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>

来源

2017-10-15 14:11:21

启动单击格使用标签和输入

回答

相关问题