Safari, key[down|up] with cursor keys

[inevercheckthisaddress]

I'm writing some stuff where I wish to allow the cursor keys to control
elements in a page. This has not been a problem except with Safari
which appears to duplicate the keydown and keyup events which are fired
when the cursor keys are pressed. I.e. pressing and releasing say, K,
results in one keydown event followed by one keyup event. Press any of
the cursor keys results in two keydown events followed by two keyup
events.
A page demonstrating the problem is at
http://megaflexdestiny.net/bits/safarieventprob.html

Has anyone else come accross this bizarre behaviour and have an
explanation or solution for it?

thanks,

mike

 

[Stephen Chalmers]

I'm writing some stuff where I wish to allow the cursor keys to control
elements in a page. This has not been a problem except with Safari
which appears to duplicate the keydown and keyup events which are fired
when the cursor keys are pressed. I.e. pressing and releasing say, K,
results in one keydown event followed by one keyup event. Press any of
the cursor keys results in two keydown events followed by two keyup
events.
A page demonstrating the problem is at
http://megaflexdestiny.net/bits/safarieventprob.html

Has anyone else come accross this bizarre behaviour and have an
explanation or solution for it?

thanks,

mike

The keyboard generates two codes per press for these keys, the first is always 0. For convenience some browsers may
suppress the first code.
I can't test this mod, but unless someone knows a better way, it may be worth a try

function catchkey(e) {

while(e.keyCode==0)
;
debug(e.type+":"+e.keyCode);
}

 

[J.J.SOLARI]

I'm writing some stuff where I wish to allow the cursor keys to control
elements in a page. This has not been a problem except with Safari
which appears to duplicate the keydown and keyup events which are fired
when the cursor keys are pressed. I.e. pressing and releasing say, K,
results in one keydown event followed by one keyup event. Press any of
the cursor keys results in two keydown events followed by two keyup
events.

Mike,

This is apparently a Safari bug which you can easily get around.

function go() {
document.addEventListener("keydown",catchkey,false);
document.addEventListener("keyup",catchkey,false);
}

W3C DOM supports two propagation schemes: bubbling and capture. Bubbling
means that an event propagates from the element on which it occured down
the document tree to document root (this is called the bubbling phase -
keyword: BUBBLING_PHASE), then from the document root back to the
element (this is called the capture phase - keyword: CAPTURE_PHASE).

When you specify "false" as third argument for the addEventListener
method, it means that event is propagating by bubbling, thus the event
is doing a round robin. As a consequence, you can catch the event a
first time when it is in the BUBBLING_PHASE, and a second time when it
is in the CAPTURE_PHASE.

In your case, you need to catch the event only once, in BUBBLING_PHASE,
and prevent its further propagation by using method stopPropagation like
this:

function catchkey(e) {
debug(e.type+":"+e.keyCode);

e.stopPropagation();
// Note: for IE, you would use this declaration:
// window.cancelBubble = true;
}

hih,

JJS.

 

[inevercheckthisaddress]

[snipped]
In your case, you need to catch the event only once, in BUBBLING_PHASE,
and prevent its further propagation by using method stopPropagation like
this:

function catchkey(e) {
debug(e.type+":"+e.keyCode);

e.stopPropagation();
// Note: for IE, you would use this declaration:
// window.cancelBubble = true;
}

Well I can't say that I think I understood everything you said but the
stopPropagation method has indeed fixed the problem so thanks for that.
Now I just have to iron out the other Safari only kinks

mike.

 

[inevercheckthisaddress]

[snipped]
In your case, you need to catch the event only once, in BUBBLING_PHASE,
and prevent its further propagation by using method stopPropagation like
this:

function catchkey(e) {
debug(e.type+":"+e.keyCode);

e.stopPropagation();
// Note: for IE, you would use this declaration:
// window.cancelBubble = true;
}

Well I can't say that I think I understood everything you said but the
stopPropagation method has indeed fixed the problem so thanks for that.
Now I just have to iron out the other Safari only kinks

mike.