jQuery firing click event without a click

Question

Well, that's kind of what happens.

$('.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))
}

When I click the dropdown button, openDropdown function is executed once, but when I Tab my way to the button and press enter, the function is called twice. Guess that has something to do with chaining, but I admit that I'm new to this and don't fully understand jQuery design patterns. I could of cource call the function twice in keydown handler and that would solve the problem, but.. you know :)

Could you please explain what's wrong with the code and what causes such behavior?

Answer 1

This is down to html 5 user interactions specifications. If you take a look at the HTML spec for elements with a tabIndex you'll find they mention that for any element with a tab index the enter key causes a click event.

I suspect that is what's causing this behaviour. You could try it on an older (non-html 5 compliant) browser to test whether this is the case.

Edit (as requested by poster): The answer given by @Terry provides a way to remedy the issue you're having. Using jquery's "preventDefault" on the event will stop it being hit twice when you hit enter.

Answer 2

You can trigger the click event on keydown using: $(this).trigger('click');, and the preventing the default action upon keydown:

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

Here's a proof-of-concept fiddle: http://jsfiddle.net/yTuR3/