Come posso attivare una funzione quando faccio clic in un punto qualsiasi della mia pagina tranne che su un div ( id=menu_content
)?
Come posso attivare una funzione quando faccio clic in un punto qualsiasi della mia pagina tranne che su un div ( id=menu_content
)?
Risposte:
È possibile applicare click
su body
di un documento e annullare click
l'elaborazione se l' click
evento viene generato da div con id menu_content
, questo si legano evento singolo elemento e il salvataggio di legame di click
ogni elemento ad eccezionemenu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
closest
inizia con l'elemento corrente, gestisce i clic su menu_content
, così come i clic sui discendenti. Penso che il secondo if
sia tutto ciò di cui hai bisogno.
Consulta la documentazione per jQuery Event Target . Utilizzando la proprietà target dell'oggetto evento, è possibile rilevare il punto in cui ha avuto origine il clic all'interno #menu_content
dell'elemento e, in tal caso, terminare anticipatamente il gestore dei clic. Dovrai utilizzare .closest()
per gestire i casi in cui il clic ha avuto origine in un discendente di #menu_content
.
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
prova questo
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
puoi anche utilizzare gli eventi esterni
So che questa domanda ha avuto risposta, e tutte le risposte sono carine. Ma volevo aggiungere i miei due centesimi a questa domanda per le persone che hanno un problema simile (ma non esattamente lo stesso).
In un modo più generale, possiamo fare qualcosa del genere:
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
In questo modo possiamo gestire non solo gli eventi attivati da qualsiasi cosa tranne l'elemento con id, menu_content
ma anche gli eventi che vengono attivati da qualsiasi cosa eccetto qualsiasi elemento che possiamo selezionare utilizzando i selettori CSS.
Ad esempio, nel seguente frammento di codice ottengo eventi attivati da qualsiasi elemento tranne tutti gli <li>
elementi che sono discendenti dell'elemento div con id myNavbar
.
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
ecco cosa ho fatto. volevo assicurarmi di poter fare clic su uno qualsiasi dei bambini nel mio datepicker senza chiuderlo.
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
il mio codice attuale:
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});