Question

I have a web page with left and right DIVs, both set to overflow: auto with content such that both divs have vertical scroll bars.

I use a jquery keyboard event handler attached to document to have SPACE keys and move the selection from one item in the right DIV to the next item in the right DIV. I have a table of options on in the left DIV. If I click on a link on the left, then hit space, the keyboard handler performs the correct operation in the right DIV, but the left DIV also scrolls down. If I click on some blank space in the right DIV and hit space again, everything behaves correctly.

It is clear to me that overflowing DIVs (and presumably other block elements) have focus, but I can’t find any discussion on how to manipulate this, nor can I find any information on blocking key events to default handlers. I know there must be a way because Google Reader doesn’t have the same problem, but so far I haven’t been able to figure out what they are doing to get the behavior I desire.

Answer 1

event.preventDefault(); should do it (add it first in your handler function).

http://api.jquery.com/event.preventDefault/