没有点击的jQuery触发点击事件答案

【问题标题】：jQuery firing click event without a click没有点击的jQuery触发点击事件
【发布时间】：2013-03-27 09:16:54
【问题描述】：

嗯，就是这样。

$('.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 处理程序中调用该函数两次，这样可以解决问题，但是.. 你知道 :)

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

【问题讨论】：

这不是因为您有 2 个事件侦听器 - 一个用于 keydown（当您按下回车键时会触发），另一个用于单击按钮时（我猜这是您在按回车）

标签： jquery events chaining

【解决方案1】：

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

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

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

【讨论】：

谢谢，这似乎是正确的答案。我已经在 IE7 中测试了该页面，并且能够使用 Enter 键打开下拉菜单。虽然我没有访问 JS 控制台。不过，您能否建议一种方法，让我可以在所有浏览器中使用它？
我会接受您的回答，因为它回答了我发布的问题，但您能否用代码引用另一个问题？

【解决方案2】：

您可以使用：$(this).trigger('click'); 触发 keydown 上的点击事件，并防止 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/

【讨论】：

e.preventDefault() 就足够了。感谢您的帮助