Javascript Event Key Property Mixup in FF

Question

This is a weird bug, indeed. In Chrome (6.0.472.62, latest) and IE8 (at least), this behaves correctly, but in FF (3.6.9, latest) both the click event and enter event register, making it hard to discern between the behavior.

Check out this code: http://jsfiddle.net/QmkwY/1/, click on the search box in the "results" and just hit enter. The results underneath should register click event: 1 enter event: 13, which is clearly incorrect.

I have different things happening for click events and enter events on my page, so when an enter event registers as a click event, you can imagine the frustration!

Anyone have a clever solution?

Answer 1

You are binding to event to '#button' it should be '#search'

Answer 2

In clickEvent, you can check e.pageX and e.pageY to be sure they have values to see if it was actually clicked.

if (e.pageX == 0 && e.pageY == 0)
{
    return;
}

But that will also affect "clicking" the button via spacebar. If that's not ok, you'll need to bind spacebar to the button separately.

$('#button').keyup(function (e)
{
    if (e.which == 32)
    {
        // do something
    }
}

Answer 3

Well, when your button is hidden I'm only getting the enter event, and not the click event in Chrome. However, when I show the button I get both. I also inserted a button between your button and the input, and that causes it to not fire the click event.

I believe this is intended as a shortcut to submit forms, you could do workarounds as others have posted, but I don't think this is a real 'problem.'