How to disable JQuery keypress event for just one element?

Question

On my site I have registered a keypress event handler for the whole document.

$(document).keypress(myhandler);

And I handle the 'space' key to scroll a list.

Trouble is, there is an <input type='text' /> element, and I don't want 'space' keypress to scroll the list when it is entered in the input.

I couldn't find any information in the "event" object passed by JQuery to the handler, to identify where the source of the event is.

Answer 1

you're looking for event.target.id, which will be the id of the element that the event was raised on. So inside myhandler you would need something like the following

function myhandler(e) {
    if (e.target.id !== 'id of input') {
        /* rest of event handler */
    }
}

Answer 2

See the QuirksMode docs about event order, and especially about how to turn off the events, which is browser-specific. Quote:

For a complete cross-browser experience do

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 3

Alternatively, you could attach another event handler to the input field, and in this handler stop the propagation of the event:

jQuery('#input-field-id').bind('keypress', function(e) {
    e.stopPropagation(); 
});

This way, you can leave the global event handler as it is. Might be cleaner.

Cheers

Tom