input element left/right key bubble

I have a strange problem, I have some input elements inside a div element. The div element has an event handler attached to it to capture the left and right keys. The div 开发者_运维知识库element also has a tabIndex.

What I am hoping for is that when the div element is focsued I can capture the left and right keys. This works and I then cancel the event (stop the bubble and prevent default) if the left and right keys are pressed.

But now the left and right keys do not work in the input elements, instead the div element processes the key press and cancels the event.

Is this normal behaviour? If so what can i do about it?

Thanks,

AJ

It's a problem of event bubbling.

I don't know what you're target browsers are, but the problem is : in some case the events are captured from the outer div first, in others it's the inner div first. The standard is that the events are going down, then up.

You need that your div captures on the bubbling phase (up), to do it, use yourdiv.addEventListener('keydown',doSomething,false) (change the type of event to yours, might be keypress or something else).

Here is a useful link to explain it better than I did.