jQuery触发点击事件而不点击

Question

嗯,这就是发生的事情.

$('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function(event){
    if (event.keyCode === 13) {
        openDropdown($(this));
    }
}).click( function(){
    openDropdown($(this));
});

function openDropdown (element){
    element.parents('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle();
    console.log($(this))
}

当我单击下拉按钮时,openDropdown功能执行一次,但是当我选择按钮并按下回车键时,该功能被调用两次.猜猜这与链接有关,但我承认我是新手,并不完全理解jQuery设计模式.我可以cource在keydown处理程序中调用该函数两次,这将解决问题,但是..你知道:)

您能否解释一下代码有什么问题以及导致这种行为的原因？

Answer 1

这取决于 html 5 用户交互规范。如果您查看带有 tabIndex 的元素的 HTML 规范，您会发现它们提到对于带有 tab 索引的任何元素，回车键会导致单击事件。

我怀疑这就是导致这种行为的原因。您可以在较旧的（不兼容 html 5）浏览器上尝试一下，以测试是否是这种情况。

编辑（根据发帖人的要求）：@Terry 给出的答案提供了一种解决您遇到的问题的方法。在事件上使用 jquery 的“preventDefault”将阻止它在您按 Enter 时被击中两次。