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

Javascript event handler on body but not on input

提问by aWebDeveloper

I have the following event handler

我有以下事件处理程序

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

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

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

我如何防止它在输入框内发生

回答by Joseph Silber

Within your handleBodyKeyDownfunction, check if

在您的handleBodyKeyDown函数中，检查是否

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

(or 'TEXTAREA').

（或'TEXTAREA'）。

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

注意：对于旧版本的 IE，请使用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
}

---

---

P.S. Why are you using addEventListenerif you have jQuery on the page? In jQuery, all of this gets sorted out for you:

PSaddEventListener如果页面上有 jQuery，为什么要使用？在 jQuery 中，所有这些都会为您解决：

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

回答by ShankarSangoli

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

如果您正在使用，jQuery您可以尝试使用此is()方法来测试目标元素，input然后什么都不做。

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

回答by lonesomeday

In your handleBodyKeyDownmethod, check to see if the event originated on an inputelement:

在您的handleBodyKeyDown方法中，检查事件是否源自某个input元素：

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

    // do the rest of your code
}

Note that the toUpperCasecall is necessary because the conditions that determine the case of the tagNameproperty are quite complicated and sometimes all but uncontrollable.

请注意，toUpperCase调用是必要的，因为确定tagName属性大小写的条件非常复杂，有时几乎无法控制。

See event.targetat MDN.

请参阅event.targetMDN。

回答by WTK

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
   }
}

回答by shabunc

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.srcElementproperty (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.

只需检查evt.target || evt.srcElement属性（现代框架为您完成标准化工作，因此，很可能这将被称为目标），无论它是否是输入。如果没有，请忽略。

回答by Dennis

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

QuirksMode告诉您如何获取事件的目标。您可以检查它是否不是输入：

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.

您的问题被标记为 jQuery，在这种情况下，您可以只测试 event.target，因为框架会为您规范化。

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

回答by Andrew D.

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:

在任何情况下都会调用 HandleBodyKeyDown 函数。您无法按照您的指示阻止其对录音方法的调用。您只能添加一个逻辑来检查这是否是“输入”并返回。另外（如果需要）您可以防止它冒泡：

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
}

回答by clockworkgeek

If you're using Prototype (which you have tagged but you also have two other frameworks tagged) then the event can be registered and filtered in one like this:

如果您使用的是 Prototype（您已经标记了它，但您也标记了另外两个框架），那么可以像这样注册和过滤事件：

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