1

HTML 

<button id="clickMe" tabindex=0>Click Me!</button>

JS

$('#clickMe').button();
$('#clickMe').click(function() {
    alert('hey');
});

$(document).keypress(function (e) {
    var key = e.keyCode ? e.keyCode : e.which;
    //detect when the user has hit enter
    if (key == 13) {
        //click the focused element
        $(document.activeElement).click();
    }
});

为什么当您点击tab聚焦按钮和enter按键事件时此警报会触发两次，但当您用鼠标单击按钮时只会触发一次？

示范

编辑： tab+enter在 IE 10 中根本不起作用

4

3 回答 3

8

因为当焦点位于按钮上时按“Enter”会触发“click”事件。你还会得到一个“keypress”事件，然后再次触发“click”事件。

于 2013-07-30T00:53:46.020 回答
3

我知道这是一篇旧帖子，但是当我在寻找几乎相同问题的解决方案时，我发现<button>元素的默认类型是"submit". 这意味着如果您在<form>包含此按钮的任何地方按 Enter，它将自动提交。

实际上，如果您在这两个输入中的任何一个中按回车键，该片段就会关闭。如果您定义一个函数来单击 Enter keypress 事件上的按钮，除非您将 a 添加"button"到 button 元素，否则它将触发两次，因为您同时使用函数和自动提交来触发它。

TLDR：添加type="button"到您的按钮元素。

$(document).ready(function(){
  
  $(document).on('click','#submit_type',function(){
    console.log($(this).attr('id'))
  });

  $(document).on('click','#button_type',function(){
    console.log($(this).attr('id'))
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <input>
  <button id ="submit_type">Can enter</button>
</form>

<form id="form2">
  <input>
  <button type="button" id="button_type">Cannot enter</button>
</form>

于 2019-05-31T15:59:38.537 回答
0

由于空间不足，我在这里回复 Pointy 的评论而不是评论；

我可以确认我可以看到在 JSbin 中触发了点击，但我不确定如何解释我的实际应用程序代码的行为与页面上的行为之间的差异。也许是因为我将“点击”绑定在单独的行上，而不是链接它。

我还没有学会如何使用 JSBin，但我郑重承诺很快就会这样做。但是，我的信息来自我自己的代码中的实验：

$(settings.selectors.patientSearchSubmitButton).click(validatePatientSearch);

紧随其后的是

$(settings.selectors.patientSearchSubmitButton).click(alertOnClick);

我还有另一个绑定：

        $(settings.selectors.patientSearchParameter).keypress(function (e) {

            if (e.which == 13) {//Enter key pressed
                validatePatientSearch();
            }
        });

patientSearchParameter 是按钮旁边的一个字段。当我专注于该字段并在 chrome、ff、普通 IE11 中单击“输入”时，validatePatientSearch 函数运行了一次，而 alertOnClick 函数没有运行。当我在 IE8、9、10 的 IE11 兼容模式下做同样的事情时；该函数运行了两次，并触发了 alertOnClick。我不确定如何证明这一点，但这是我的经验，这是超过 20 次左右测试尝试的重复行为。我正在使用 Windows 7 64 位。不知道还有什么可能导致它以这种方式运行，但我希望它对某人有用。

可能是因为我的点击被绑定到按钮而不是字段？

于 2014-01-08T21:12:53.063 回答