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

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

- Anton Matyulkov

---

你有两个事件监听器，一个是用于keydown（按enter键时触发），另一个是点击按钮时触发（我猜这就是你按enter时的操作），所以才会出现这种情况。 - Pete

Answer 1

这是基于HTML5用户交互规范的。如果您查看HTML元素tabIndex规范，您会发现对于任何具有tabIndex的元素，按Enter键会触发单击事件。

我怀疑这就是导致此行为的原因。您可以在旧版（非HTML5兼容）浏览器上尝试它，以测试是否是这种情况。

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

- Timbo

---

谢谢，那似乎是正确的答案。我已经在IE7中测试了该页面，并且能够使用Enter键打开下拉菜单。虽然我没有访问JS控制台的权限。不过，您能否建议一种方法，使其在所有浏览器中都能正常工作？ - Anton Matyulkov

我会接受你的答案，因为它回答了我发布的问题，但是你能否请引用另一个带有代码的答案？ - Anton Matyulkov

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/

- Terry

---

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