防止<a>按ENTER键时无法打开链接

Prevent <a> link from opening when pressing the ENTER key

本文关键字：链接 ENTER lt gt 防止      更新时间：2023-09-26

我有一个列表，其中每个元素都包含一个链接。默认情况下，当列表元素具有"焦点"并且我按ENTER键时，浏览器会自动重定向到链接。有没有办法防止这种行为？

简单地说，我想我的问题是，当用户在上点击ENTER时，如何防止链接打开

然而，我仍然想保持鼠标点击事件的链接打开行为！！

<ul>
    <li> <a href="SOMELINK1">LINK1</a> </li>
    <li> <a href="SOMELINK2">LINK2</a> </li>
<ul>

$('ul a').on('keydown', function(e){
     if(e.which === 13) //enter
         e.preventDefault(); //prevent the default behavoir
                             //(a redirect in this case)
});

http://jsfiddle.net/Jdf85/

onclick事件对"鼠标"点击和"输入"点击没有区别。不过，您可以通过onkeydown检测到使用"回车"的点击。请注意，如果删除此功能，将使残疾人无法/更难浏览您的网站。

$('a').on( 'keydown', function( e ) {
    if( e.which == 13 ) {
      e.preventDefault();
    }
} );

删除您不希望使用的事件。

<style>.disabled { cursor: not-allowed; }</style>
<a class="disabled" href="blah">Click me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(".disabled").on("click keydown", function(e){ e.preventDefault() });
</script>
相关文章：