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

Javascript event handler on body but not on input

本文关键字：输入 主体 事件处理 程序 Javascript      更新时间：2023-09-26

我有以下事件处理程序

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

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

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

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

(或'TEXTAREA').

注意:对于旧版本的IE，使用event.srcElement.tagName

一样:

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
}

注:如果页面上有jQuery，为什么要使用addEventListener ?在jQuery中，所有这些都为您整理好了:

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

在handleBodyKeyDown方法中，检查事件是否起源于input元素:

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

注意toUpperCase调用是必要的，因为决定tagName属性的情况的条件非常复杂，有时几乎是不可控的。

参见event.target。

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

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

这对我有用:

const fromInput = event => event.srcElement instanceof HTMLInputElement;
function handleBodyKeyDown(event) {
  if(fromInput(event))
    return;
  
  // do your magic here
}

你可以这样做:

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

有时候(对我来说)最好不要阻止它的发生，而是在事件情况下忽略它，当它在输入中发生时。看来这也是你的情况。

只要检查evt.target || evt.srcElement属性(现代框架为你做这个规范化工作，所以，很可能这将被称为目标)，无论它是否是输入。

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

你的问题被标记为jQuery，在这种情况下，你可以只测试事件。目标为框架为您规范化。

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

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
}

如果你正在使用Prototype(你已经标记了，但你也有两个其他框架标记)，那么事件可以注册和过滤在一个像这样:

document.on('keydown', ':not(input)', handleBodyKeyDown);
相关文章：