Javascript fires two events - onkeypress and onclick

Question

The problem is that I press the button on the radio button, the MyFunc element is triggered twice - once for the "onkeypress" event, at another time for the "click" event.

Question: "Why?" I need to deal with this in two different ways, but now I can not understand what the initial event is. When I click the mouse button, it fires only for the "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 your help!

Answer 1

The onclick event fires when a radio button is selected. Since you select it by pressing a key, both events will be fired. The onkeypress event onkeypress , and then the onclick event.

Answer 2

This can be done without resorting to frameworks that are always bulky and slow. The trick is to record which event occurred at which point in time, and then work on top of it for a period of time. When you keypress event, the click event fires right after that, here is a list of how quickly the click event fires after the keypress event ...

Chrome 39.0 : 0ms

Firefox 31.0 ESR : 18 ~ 20 ms

IE 11 : 2 ~ 4 ms

Opera 12.1 : 0ms

Chrome and (real) Opera are not waiting, IE is fast enough, and Firefox takes so long to talk; the range of operation with (at least on my system) is 0 ~ 20 ms. Programmatically, I set a limit of 50 ms for people who are still using junky computers that are too busy with 150 useless processes in the background.

Please note that you will have to use window -level global events, although this seems to work reliably for me in all the browsers I mentioned.

 var option = new function() {this.name = '';} window.onclick = function(event) { option.clickDate = new Date().getTime(); } window.onkeypress = function(event) { option.keyCode = event.keyCode; option.keyCodeDate = new Date().getTime(); } function MyFunc(e,obj) { if (option.keyCodeDate && option.clickDate && ( (option.clickDate - option.keyCodeDate)>=0 && (option.clickDate - option.keyCodeDate)<51) {alert('keypress event');} else {alert('click event');} } 

Answer 3

you can add a third parameter to your function

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

Now add your events to bool ...

 <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 4

I would create two separate handlers: one for the click event and one for clicking them.

Then your handlers can extract everything you need from the event and call the third function with common logic.

Your onkeypress should ignore the event for a space and enter the keys. However, I do not understand why you are listening for a keypress event. Could you clarify? If you explain what you will do, perhaps we can be more helpful.

Answer 5

If 2 events are triggered while a key is pressed, check the event.detail property in onClick . if event.detail = 0 , then this means that the mouse was not clicked on this element, and we can ignore it. event.detail

Answer 6

The key event is only for users with a keyboard to activate the button, but if you use the "click" button, this should be the only event that is needed because it fires when you press the spacebar. If you have events on a custom control, the key and click events may be used and not fired together.

Answer 7

Use onMouseDown instead of onclick in JavaScript, and for consistency, add the onKeyPress event here - extract the event from the HTML tag.

Sudo Code:

 var myRadioButton = document.getElementById('radio'); myRadioButton.addListener("radioClick",onMouseDown); myRadioButton.addListener("radioKey",onKeyPress); radioClick() { //code to do stuff } 

Take a look at jQuery: http://jquery.com/ for the actual code and an easy way to write your JavaScript.