Javascript gestore di eventi sul corpo, ma non su input

Question

Ho il seguente gestore di eventi

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

Come posso evitare che si verifichi quando all'interno di una casella di input

Answer 1

Entro la funzione handleBodyKeyDown, verificare se

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

(o 'TEXTAREA').

Nota: Per versioni precedenti di IE, utilizzare event.srcElement.tagName.

Come così:

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. Perché stai usando addEventListener se hai jQuery sulla pagina? In jQuery, tutto questo diventa risolto per voi:

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

Answer 2

nel metodo handleBodyKeyDown, controllare per vedere se l'evento ha avuto origine in un input elemento:

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

    // do the rest of your code 
} 

Si noti che la chiamata toUpperCase è necessario perché le condizioni che determinano il caso della proprietà tagName sono piuttosto complicate e talvolta quasi incontrollabili.

Vedere event.target at MDN.

Answer 3

Si potrebbe fare qualcosa di simile:

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

Answer 4

A volte (come a me) è meglio non per evitare che si verifichi, ma di ignorare nei casi di eventi, quando si è verificato in ingresso. Sembra che anche questo sia il tuo caso.

Basta controllare la proprietà evt.target || evt.srcElement (i framework moderni fanno sì che questa normalizzazione funzioni per voi, quindi, molto probabilmente questo verrà chiamato target) indipendentemente dal fatto che sia input o meno. In caso contrario, basta ignorare.

Answer 5

QuirksMode indica come ottenere l'obiettivo di un evento. È possibile verificare che non si tratta di un ingresso:

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

La tua domanda è contrassegnati jQuery, nel qual caso si può solo provare event.target come quadro normalizza questo per voi.

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

Answer 6

Se si utilizza jQuery si può provare questo metodo che utilizza is() per testare l'elemento di destinazione è input poi non fare nulla.

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

Answer 7

La funzione HandleBodyKeyDown verrà invocata in ogni caso. Non puoi impedire la sua chiamata sul metodo di registrazione come hai indicato. È possibile aggiungere una logica solo per verificare se questo è un 'input' e restituire.Additionaly (se necessario) si può evitare che si bolla:

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 8

Se stai usando Prototype (che avete etichettato, ma si hanno anche altri due quadri contrassegnati) allora l'evento può essere registrato e filtrato in una così:

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