RISOLTO Vedere se l'utente clicca fuori ad un div per eseguire funzione js

[hddsfortuna]

Salve a tutti,

ho una pagina dove c'è un <div> particolare, e voglio far eseguire una funzione js se l'utente clicca al di fuori di questo div.



Come faccio?


Grazie

 

[lukezona]

Puoi essere più specifico sul problema? Questo div è selezionato prima che l'utente clicchi fuori? E' l'unico div della pagina?

Comunque se il div è già con il focus basta la funzione onblur di javascript.

Altrimenti bisognerebbe capire la struttura della pagina per capire meglio come agire.

 

[hddsfortuna]

Puoi essere più specifico sul problema? Questo div è selezionato prima che l'utente clicchi fuori? E' l'unico div della pagina?

Comunque se il div è già con il focus basta la funzione onblur di javascript.

Altrimenti bisognerebbe capire la struttura della pagina per capire meglio come agire.

Allora, all'apertura della pagina il div non viene visualizzato.

Cliccando su un pulsante, imposto la proprietà display: block per farlo vedere.

Quando con il mouse faccio un click al di fuori di esso, devo chiamare una funzione js per dargli display: none.

Il div è a posizionamento assoluto e viene mostrato con z-index: 2.



Grazie

 

[lukezona]

Allora, all'apertura della pagina il div non viene visualizzato.

Cliccando su un pulsante, imposto la proprietà display: block per farlo vedere.

Quando con il mouse faccio un click al di fuori di esso, devo chiamare una funzione js per dargli display: none.

Il div è a posizionamento assoluto e viene mostrato con z-index: 2.



Grazie

E' una sorta di modale? L'utente può solo cliccare all'esterno di quel div o deve poter fare altre azioni?

Se ha la stessa logica di una modale dovrebbe bastare la funzione onblur di javascript (o .blur() di jQuery se lo stai già usando). In questo modo dovrebbe funzionare, magari se ho tempo ti faccio un esempio.

 

[hddsfortuna]

E' una sorta di modale? L'utente può solo cliccare all'esterno di quel div o deve poter fare altre azioni?

Se ha la stessa logica di una modale dovrebbe bastare la funzione onblur di javascript (o .blur() di jQuery se lo stai già usando). In questo modo dovrebbe funzionare, magari se ho tempo ti faccio un esempio.

Questo div contiene delle spiegazioni in merito alla compilazione di un form, quindi cliccando su "Aiuto" nel form si apre, e una volta aperto, cliccando su qualunque parte esterna al div, si richiude.


Grazie

 

[lukezona]

Questo div contiene delle spiegazioni in merito alla compilazione di un form, quindi cliccando su "Aiuto" nel form si apre, e una volta aperto, cliccando su qualunque parte esterna al div, si richiude.


Grazie

Ecco una demo molto rudimentale con jQuery. Se ti serve ti posso anche fare quella in Javascript puro: https://jsfiddle.net/coLvbq51/1/

 

[hddsfortuna]

Ecco una demo molto rudimentale con jQuery. Se ti serve ti posso anche fare quella in Javascript puro: https://jsfiddle.net/coLvbq51/1/

Mi serve in js puro, non uso jquery.

Cmq ci tengo a precisare che in questo div esistono svariati elementi html, tra cui <p>, <a>, <ul>, <li>, nel caso questo potrebbe influenzare sul fatto di tenere il focus sul div, perché i collegamenti <a> portano a funzioni js di espansione e compressione degli <ul>, e comunque questo div aiuto non deve chiudersi.



Grazie

 

[lukezona]

Mi serve in js puro, non uso jquery.

Cmq ci tengo a precisare che in questo div esistono svariati elementi html, tra cui <p>, <a>, <ul>, <li>, nel caso questo potrebbe influenzare sul fatto di tenere il focus sul div, perché i collegamenti <a> portano a funzioni js di espansione e compressione degli <ul>, e comunque questo div aiuto non deve chiudersi.



Grazie

Per gli altri elementi non c'è problema: basta che quelli che vai a cliccare siano interni al DIV e lui non perderà il focus.

Sulla perdita del focus nell'esempio lo chiudevo ma puoi fare quello che vuoi nella funzione collegata.

Qui c'è l'esempio in javascript puro: https://jsfiddle.net/coLvbq51/4/

E' una funzione molto basilare, ovviamente poi devi adattarla alle tue esigenze. Ho usato delle funzioni con parametri così magari le puoi anche riutilizzare se ti servono più volte nel progetto.

Fammi sapere se è quello che stai cercando.

 

[hddsfortuna]

Inanzitutto grazie per la pazienza che mi stai dedicando.

Il fatto è che non si chiude, questo è il codice html:

<button onclick="apriaiuto()">Aiuto</button>
<div id="aiuto" onblur="chiudiaiuto()">
<p>Per fare questa compilazione serve...</p>
<a onclick="aprilista()">Dettagli</a>
<ul id="lista">
<li>Passo 1: ...</li>
<li>Passo 2: ...</li>
</ul>

</div>

Questo è il codice javascript:

function apriaiuto() {
document.getElementById('aiuto').classList.add('blc');
document.getElementById('aiuto').focus();
}

function chiudiaiuto() {
document.getElementById('aiuto').classList.remove('blc');
}

function aprilista() {
document.getElementById('lista').classList.add('blc');
}

Questo è il CSS:

.blc {
display: block !important;
}

#aiuto, #lista {
display: none;
}

L'ho provato anche sul sito che hai postato tu, edit fiddle, ma non si chiude il div aiuto se clicco fuori.

Mi aiuti?


Grazie

 

[lukezona]

Inanzitutto grazie per la pazienza che mi stai dedicando.

Il fatto è che non si chiude, questo è il codice html:

[...]

L'ho provato anche sul sito che hai postato tu, edit fiddle, ma non si chiude il div aiuto se clicco fuori.

Mi aiuti?


Grazie

Mi ero dimenticato di specificarlo: per fare funzionare il focus (e quindi il blur) bisogna che il div interessato abbia l'attributo

tabindex="0"

 

[hddsfortuna]

Ti devo dire la verità: con l'esempio di codice che ho postato io va.

Ma come serve a me nella vera pagina dove c'è il div non va, e infatti ho notato una leggerissima differenza, qui nel mio esempio ho scritto così:

<a onclick="aprilista()">Dettagli</a>

Ma nella pagina reale dove mi serve ho messo così:

<a href="javascript:aprilista()">Dettagli</a>

Quindi, se clicco su Dettagli, si chiude il div perché penso che perde il focus.

Come posso ovviare a questo problema, possibilmente lasciando href senza perdere il focus?


Grazie

 

[lukezona]

Ti devo dire la verità: con l'esempio di codice che ho postato io va.

Ma come serve a me nella vera pagina dove c'è il div non va, e infatti ho notato una leggerissima differenza, qui nel mio esempio ho scritto così:

<a onclick="aprilista()">Dettagli</a>

Ma nella pagina reale dove mi serve ho messo così:

<a href="javascript:aprilista()">Dettagli</a>

Quindi, se clicco su Dettagli, si chiude il div perché penso che perde il focus.

Come posso ovviare a questo problema, possibilmente lasciando href senza perdere il focus?


Grazie

Riesci a caricare il codice della tua pagina su fiddle (togli pure i testi se preferisci, mi basta la struttura)? Così almeno riesco a testare delle alternative.

Comunque perché vorresti usare l'href anziché il classico onclick che è più funzionale?

 

[Mursey]

Concordo, usare href per eseguire codice js non e' proprio il modo corretto.

 

[hddsfortuna]

Premesso che non sono registrato a fiddle, cmq sono riuscito a scrivere il codice e premere Update, quindi l'url è questo: https://jsfiddle.net/coLvbq51/5/

Per quanto riguarda href/onclick, uso href per il semplice fatto che è un collegamento ipertestuale, e quindi come tale viene trattato anche graficamente, dandomi il cursore della manina quando ci vado sopra. Se poi non si può proprio usare href (perché perde il focus), allora metto onclick e faccio modifiche alla grafica.



Grazie

 

[lukezona]

Premesso che non sono registrato a fiddle, cmq sono riuscito a scrivere il codice e premere Update, quindi l'url è questo: https://jsfiddle.net/coLvbq51/5/

Per quanto riguarda href/onclick, uso href per il semplice fatto che è un collegamento ipertestuale, e quindi come tale viene trattato anche graficamente, dandomi il cursore della manina quando ci vado sopra. Se poi non si può proprio usare href (perché perde il focus), allora metto onclick e faccio modifiche alla grafica.



Grazie

A quanto vedo perderà sempre il focus visto che è un collegamento ipertestuale ed è come se mettesse il focus a ciò che punta.

Per ovviare basta usare onclick e applicare come stile "cursor: pointer".