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设计模式。我可以在keydown处理程序中两次调用该函数，这样可以解决问题，但是......你知道:)

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

Answer 1

这取决于html 5用户交互规范。如果你看一下HTML spec for elements with a tabIndex，你会发现他们提到对于任何带有标签索引的元素，输入键会导致点击事件。

我怀疑这是造成这种行为的原因。您可以在较旧的（不符合HTML标准的）浏览器上尝试使用它来测试是否属于这种情况。

编辑（按照海报的要求）：answer given by @Terry提供了一种方法来解决您遇到的问题。在事件中使用jquery的“preventDefault”会在你点击Enter时阻止它被击中两次。

Answer 2

您可以使用以下命令触发keydown上的click事件：$(this).trigger('click');，并在keydown时阻止默认操作：

$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function (e) {
    if (e.keyCode === 13) {
        $(this).trigger('click');
        e.preventDefault();
    }
}).click(function () {
    openDropdown($(this));
});

这是一个概念验证小提琴：http://jsfiddle.net/yTuR3/

jQuery触发点击事件而不点击

2 个答案: