CODEWITHSUNDEEP
javascripteventsonclickdom-eventsonkeypress
podeig
podeig

Reputation: 2741

Javascript fires two events - onkeypress and onclick

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
}

Upvotes: 6

Views: 21969

Answers (8)

ptman
ptman

Reputation: 917

I've looked at the properties .type and .detail as suggested. type stays as click on both firefox and chromium. detail stays as 0 on chromium, but changes to 1 when actually clicking with the mouse on firefox. But .x and .y do change on both firefox and chromium when clicking with mouse, while remaining as 0 when the event originates from keyboard actions.

Upvotes: 0

Vincent Young
Vincent Young

Reputation: 1

A key event is for keyboard only users to activate a button, but if you're using a button "click" should be the only event needed as it gets fired when pressing SPACE BAR. If you have events on a custom control, "key" event and "click" can both be used and will not fire together.

Upvotes: 0

Aurril
Aurril

Reputation: 2469

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 then the onclick event.

Upvotes: 1

pooja sharma
pooja sharma

Reputation: 39

If 2 events are being fired during pressing a key then check event.detail property in onClick function. if event.detail = 0 then it means that mouse was not clicked on that element and we can ignore it. event.detail

Upvotes: 3

John
John

Reputation: 13729

It can be done and without resorting to frameworks which are always bulky and slow. The trick is to record which event happened at what point in time and then on top of that to work within a time frame. When you trigger the keypress event the click event is triggered immediately afterwards, here is a list of how quickly the click event is triggered after the keypress event...

Chrome 39.0: 0ms

Firefox 31.0 ESR: 18~20ms

IE 11: 2~4ms

Opera 12.1: 0ms

Chrome and (real) Opera don't wait, IE is reasonably quick and Firefox takes it's time so-to-speak; the range to work with (at least on my system) is 0~20 ms. Programmatically I'll set the limit to 50ms for people still using junky computers that are too busy with the 150 useless processes in the background.

Note you'll have to utilize the window global level events though this seems to work reliably for me in all the browsers that 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');}
}

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

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.

Upvotes: 0

Todd Moses
Todd Moses

Reputation: 11029

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.

Upvotes: -1

hunter
hunter

Reputation: 63522

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

Upvotes: 0

Related Questions