Javascript obsługi zdarzeń na ciele, ale nie na wejściu

Question

Mam następujący obsługi zdarzeń

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

Jak mogę zapobiec jej wystąpieniu gdy wewnątrz pola wejściowego

Answer 1

W ramach swojej funkcji handleBodyKeyDown, sprawdź czy

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

(lub 'TEXTAREA').

Uwaga: Dla starszych wersji IE, użyj event.srcElement.tagName.

tak:

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: Dlaczego używasz addEventListener, jeśli masz jQuery na stronie? W jQuery, wszystko to zostanie załatwione dla Ciebie:

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

Answer 2

w swojej metodzie handleBodyKeyDown, sprawdzić, czy zdarzenie pochodzi na input element:

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

    // do the rest of your code 
} 

Uwaga że wezwanie toUpperCase jest konieczne ponieważ warunki, które określają przypadek własności tagName, są dość skomplikowane, a czasami prawie niekontrolowane.

Zobacz event.target at MDN.

Answer 3

Można zrobić coś takiego:

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

Answer 4

Czasami (jak dla mnie) to lepiej nie, aby zapobiec jego wystąpienia, ale ignorować w przypadkach zdarzeń, kiedy to wystąpiły w wejściu. Wygląda na to, że to także twoja sprawa.

Po prostu sprawdź właściwość evt.target || evt.srcElement (nowoczesne frameworki wykonują tę pracę normalizacyjną dla ciebie, więc najprawdopodobniej będzie to nazywane celem) niezależnie od tego, czy jest to wejście, czy nie. Jeśli nie, po prostu zignoruj.

Answer 5

mówi, jak zdobyć cel wydarzenia. Można sprawdzić, że nie jest to wejście:

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

Twoje pytanie jest oznaczone jQuery, w którym to przypadku można po prostu przetestować event.target jako ramy normalizuje to dla ciebie.

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

Answer 6

Jeśli używasz jQuery można spróbować tego, który wykorzystuje is() sposób przetestować element docelowy jest input potem nic nie robić.

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

Answer 7

Funkcja HandleBodyKeyDown zostanie wywołana w każdym przypadku. Nie można zapobiec wywołaniu metody nagrywania zgodnie z podanym wskazaniem. Możesz dodać tylko logikę do sprawdzenia, czy jest to "wejście" i powrót.Dodatkowo (w razie potrzeby) można zapobiec bańce 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 8

Jeśli używasz Prototype (które określili, ale trzeba także dwa inne ramy oznaczone) to zdarzenie może być rejestrowane i filtrowane w jednym tak:

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