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

嗯，这就是发生了什么。没有点击的jQuery触发点击事件

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

请问您能解释代码中出现了什么问题以及导致此类行为的原因？

来源

2013-03-27 Anton Matyulkov

是不是因为你有2个事件监听器 - 一个用于keydown（当你按下回车键时会触发），另一个用于单击按钮时（当我按下回车键时，我猜你正在做什么） – Pete 2013-03-27 09:20:07

这归结于html 5用户交互规范。如果你看一下HTML spec for elements with a tabIndex，你会发现他们提到，对于任何带有制表索引的元素，回车键会导致一个单击事件。

我怀疑是什么导致了这种行为。你可以在一个较老的（不兼容html 5的）浏览器上测试它是否属于这种情况。

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

来源

2013-03-27 09:23:17 Timbo

谢谢，这似乎是正确的回答。我已经在IE7中测试了该页面，并且可以使用Enter键打开下拉菜单。虽然我没有接触到JS控制台。虽然，请问您能否提出一种方法让我可以在所有浏览器中都能使用它？ – 2013-03-27 09:27:15

我会接受你的答案，因为它回答了我发布的问题，但是你能否引用另一个代码？ – 2013-03-27 09:31:15

您可以使用的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-27 09:23:40 Terry

e.preventDefault（）就足够了。感谢您的帮助 – 2013-03-27 09:30:11

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

回答

相关问题