I have a keypress handler on a web page assigned to the body element. I really do want it to be active anywhere in the web page. Or so I thought. The keypress events in textual input forms also activate the body handler, which makes sense, but which I don't want.

Ideally, I'd like to keep the keypress handler assigned to the body element and somehow exclude just the input forms. Is there any way I can stop the event at the input level and prevent it from propagating to body? (Or is that even the right way to look at HTML DOM events?)

I have a keypress handler on a web page assigned to the body element. I really do want it to be active anywhere in the web page. Or so I thought. The keypress events in textual input forms also activate the body handler, which makes sense, but which I don't want.

Ideally, I'd like to keep the keypress handler assigned to the body element and somehow exclude just the input forms. Is there any way I can stop the event at the input level and prevent it from propagating to body? (Or is that even the right way to look at HTML DOM events?)

• javascript
• dom-events
• keypress
• onkeypress
• event-propagation

1 Answer 1

It would be easier simply to check which element triggered the event in your keypress handler and filter out input elements:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if ( !/INPUT|TEXTAREA|SELECT|BUTTON/.test(target.nodeName) ) {
        // Do stuff
    }
};