Javascript fires two events - onkeypress and onclick

Question

Problem is when I press a key over a radio button, element MyFunc fires twice - once for "onkeypress" event, another time for "click" event.

Question "Why?" I need to handle this by two different ways, but now I can not recognize what initial event was. When I click a mouse it fires just for "click" event.

<ul>
    <li>
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_1" />Topic 1
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_2" />Topic 2
    </li>
</ul>

function MyFunc(e, obj) {
    alert(e.type); // alerts "keypress" and then "click"
    // Do my stuff
}

Thank you for help!

Answer 1

you could add a 3rd parameter to your function

function MyFunc(e, obj, click) {
    if (click) { } // do stuff
    else { } // do other stuff
}

Now add in a bool to your events...

<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_1" />Topic 1
<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_2" />Topic 2

Answer 2

The onclick Event is fired, when the radio button gets selected. Since you select it by pressing a key, both events will get fired. First the onkeypress event and the the onclick event.

Answer 3

Use onMouseDown instead of onclick within JavaScript and for consistency add you onKeyPress event here too - taking the event out of the HTML tag.

Sudo Code:

var myRadioButton = document.getElementById('radio');

myRadioButton.addListener("radioClick",onMouseDown);
myRadioButton.addListener("radioKey",onKeyPress);

radioClick()
{
 //code to do stuff
}

Check out jQuery: http://jquery.com/ for the actual code and easy way to write your JavaScript.

Answer 4

I would create two separate handlers: one for the click event and one for they keypress.

Then your handlers can extract whatever you need from the event and call a third function that has the common logic.

Your onkeypress would have to ignore the event for the space and enter keys. I don't understand why you are listening to the keypress event though. Could you elaborate? If you explain what you'll do, maybe we can be more helpful.