Question

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 来聚焦按钮并且输入来进行按键事件时，这会发出两次警报，但只有当你用鼠标点击按钮时才会触发一次？

Demonstration

编辑：标签 + 输入在IE 10中根本不起作用

Answer 1

因为当焦点在按钮上时点击“Enter”会触发“点击”事件本地。你也得到一个“按键”事件，然后再次触发“点击”事件。

Answer 2

由于空间不足，我在这里回应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，plain IE11中点击“enter”时，validatePatientSearch函数运行一次，并且alertOnClick函数未运行。当我在IE11的IE11兼容模式中做同样的事情，9,10;该函数运行了两次，并触发了alertOnClick。我不确定我是如何证明这一点的，但这是我的经验，这是20多次测试尝试的重复行为。我使用的是Windows 7 64位。不知道还有什么可能导致它以这种方式表现，但我希望它对某人有用。

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

Answer 3

我知道这是一篇过时的文章，但是在寻找几乎相同问题的解决方案时，我发现<button>元素的默认类型为"submit"。这意味着，如果您在包含该按钮的<form>中的任意位置按Enter，它将自动提交。

实际上，如果在这两个输入中的任何一个中按Enter键，则代码段都会关闭。如果您定义了在Enter键按下事件上单击按钮的功能，除非您向按钮元素添加"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>

在keypress上，JQuery UI点击事件触发两次

3 个答案: