7

嗯，就是这样。

$('.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函数会执行一次，但是当我使用 Tab 键到达按钮并按 Enter 时，函数会被调用两次。猜猜这与链接有关，但我承认我是新手，并不完全理解 jQuery 设计模式。我当然可以在处理程序中调用该函数两次，keydown这样可以解决问题，但是..你知道:)

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

4

2 回答 2

4

这归结为 html 5 用户交互规范。如果您查看带有 tabIndex 的元素的 HTML 规范，您会发现他们提到对于任何带有选项卡索引的元素，输入键都会导致单击事件。

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

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

于 2013-03-27T09:23:17.020 回答
1

您可以使用: 触发 keydown 上的点击事件$(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/

于 2013-03-27T09:23:40.490 回答