Javascript 事件处理程序在主体上但不在输入上

Question

I have the following event handler

document.addEventListener('keydown', handleBodyKeyDown, false);

HOW DO i prevent it from occurring when inside a input box

Answer 1

Within your handleBodyKeyDown function, check if

 event.target.tagName.toUpperCase() == 'INPUT'

(or 'TEXTAREA' ).

Note: For older versions of IE, use event.srcElement.tagName .

Like so:

document.addEventListener('keydown', handleBodyKeyDown, false);

function handleBodyKeyDown(event)
{
    var e = event || window.event,
        target = e.target || e.srcElement;

    if (target.tagName.toUpperCase() == 'INPUT') return;

    // Now continue with your function
}

---

PS Why are you using addEventListener if you have jQuery on the page? In jQuery, all of this gets sorted out for you:

$(document).on('keydown', ':not(input)', function(e)
{
    // Your code goes here...
});

Answer 2

This worked for me:

const fromInput = event => event.srcElement instanceof HTMLInputElement;

function handleBodyKeyDown(event) {
  if(fromInput(event))
    return;
  
  // do your magic here
}

Answer 3

In your handleBodyKeyDown method, check to see if the event originated on an input element:

function handleBodyKeyDown(event) {
    if (event.target.tagName.toUpperCase() === 'INPUT') {
        return; // do nothing
    }

    // do the rest of your code
}

Note that the toUpperCase call is necessary because the conditions that determine the case of the tagName property are quite complicated and sometimes all but uncontrollable.

See event.target at MDN .

Answer 4

If you are using jQuery you can try this which uses is() method to test the target element is input then do nothing.

function handleBodyKeyDown(event) {
    if ($(event.target).is("input")) {
        return; 
    }
    else{
       //Do your stuff here
    }
}

Answer 5

You could do something like:

handleBodyKeyDown = function(e) {
   var e = e || window.event
   if (e.target.tagName != "INPUT") {
       // handle this since it isn't input
   }
}

Answer 6

Sometimes (as to me) it is better not to prevent it to occur, but to ignore in the event cases, when it occured in the input. It's looks like this is also your case as well.

Just inspect evt.target || evt.srcElement evt.target || evt.srcElement property (modern frameworks do this normalization work for you, so, most probably this will be called target) whether it's input or not. If not, just ignore.

Answer 7

QuirksMode tells you how to get an event's target. You can check that it is not an input:

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    if( targ.tagName != "INPUT" ) {
       //Perform your action here
    }
}

Your question is tagged jQuery, in which case you can just test event.target as the framework normalizes this for you.

$(document).bind("keydown", function (event) {
    if(event.target.tagName != "INPUT") {
        //Do something
    }
});

Answer 8

HandleBodyKeyDown function will be invoked in any case. You can not prevent its call on the method of recording as you indicated. You can only add a logic for checking if this an 'input' and return. Additionaly (if needed) you can prevent it from bubble up:

function handleBodyKeyDown(ev) {
  ev=ev||event;
  var sender=ev.target||ev.srcElement;
  if(sender.tagName.toLowerCase()==="input") {
    if(ev.stopPropagation)ev.stopPropagation();
    else ev.cancelBubble=true; // for IE8 or less
    return true; // do not prevent event from default action
  }
  // your code for global keydown
}

Answer 9

如果你正在使用Prototype（你已标记但你还有两个其他框架被标记），那么可以注册和过滤事件，如下所示：

document.on('keydown', ':not(input)', handleBodyKeyDown);