why browser trigger a click event instead of a submit in a form?

Question

I have this code http://jsfiddle.net/2Gay9/3/

HTML

<form action="/" method="get" onsubmit="return false";>
    test: <input type="text" value="">
    <input type="submit" value="submit">
</form>

JS

jQuery('input').bind("keydown click", function(event){
    console.log(event.type);
    console.log(jQuery(this));
});

Try hit RETURN in input text and look console:

keydown
jQuery(input)
click
jQuery(input submit)

QUESTION: Why browser is triggering a 'click' event on submit button, instead of trigger a 'submit' event in the form? Is this a project flaw or a specification? How can I cancel second event WITHOUT cancel form submission?

Tks

UPDATE In other words, I just need to diferenciate my event from browser event.

Possible duplicate: http://stackoverflow.com/questions/4763638/enter-triggers-button-click — Mike Robinson, Jul 05 '12 at 22:02

score 0 · Answer 1 · answered Jul 05 '12 at 22:12

0

use:

jQuery('input').bind("keydown click", function(event){
    event.preventDefault();
    console.log(event.type);
    console.log(jQuery(this));
});

answered Jul 05 '12 at 22:12

Alex

3,732
5
37
59

I dont want do stop form submission because I have a lot of js that depends on this. I want just to diferenciate my event from browser event. – Topera Jul 05 '12 at 22:18
you mean custom events/event delegation? – Alex Jul 05 '12 at 22:27
No. I just want to know if a user clicked in submit button or if this click was triggered by browser. – Topera Jul 05 '12 at 22:32

score 0 · Accepted Answer · answered Jul 06 '12 at 13:43

SOLVED!

If I cant stop click event on submit button, I can workarround only diferenciating browser from users click. To diferenciate browsers click from users click I will use mousedown event instead of click event.

Every time we hit RETURN in a input text, browser trigger click on first submit button in current form. But this don't trigger mousedown event, "exclusive for humans" in this case.

Fixed version, that prints event once.

jQuery('input').bind("keydown mousedown", function(event){
    console.log(event.type);
    console.log(jQuery(this));
});

http://jsfiddle.net/2Gay9/6/

why browser trigger a click event instead of a submit in a form?

2 Answers2