Un utente ha chiesto informazioni su Developing with WordPress di Wordpress

“Modifica” non attiva un evento JavaScript

Un utente ha chiesto 👇

Ciao, sto lavorando con javascript su un nuovo selettore di colori personalizzato per un nuovo plugin su cui sto lavorando.
Funziona perfettamente tranne un problema. Sull’ingresso del colore, ho impostato due ascoltatori di eventi. Il primo su “modifica” (in un plugin diverso) e il secondo su “clic” (in questo nuovo plugin).
Quando seleziono un nuovo colore con il nuovo plug-in, l’interruttore di input cambia e viene visualizzato il nuovo colore; ma il fuoco non è la funzione che dovrebbe essere eseguita su “switch” (nel prossimo plugin).

Qualcuno ha idea del perché?

di seguito il codice:

html:


<input id="color1" type="color" value="#ffffff">

Plugin JavaScript uno:

 
 const clr1 = document.querySelector('#color1');

 if(clr1){
   clr1.addEventListener('change', function(){
     // do something
   } );
 }

Vorrei aggiungere il primo plugin che funziona perfettamente con il selettore di colori del browser standard

Plugin due JavaScript:

 
 const clr2 = document.querySelector('#color1');

 if(clr2){
   clr2.addEventListener('click', function(){
     e.preventDefault();
     this.disabled = true;
     opnePicker(); // it open the picker popup win
   } );

   // when I set the color in the input field

   var newclr = getColor() // it returns the clicked color
   clr2.disabled = false;
   clr2.value = newclr;
   closePicker(); // it close the picker popup win
 }

Il colore dell’ingresso cambia il suo valore, ma come ho detto non innesca il primo evento di “cambio”.

Questo argomento è stato modificato 8 mesi, 2 settimane fa da.

(@diondesigns)

8 mesi, 2 settimane fa

Credo che il problema che hai è la tua posizione this.disabled = true, se non sbaglio, i browser non promuoveranno l’evento di scambio. In tal caso, la risoluzione di un evento personalizzato risolverà il problema. Documentazione:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

(@ antonop4u)

8 mesi, 2 settimane fa

Ciao Dion, grazie per la tua gentile riproduzione. Ho appena controllato, ho commentato la linea this.disabled = true in tutte le funzioni coinvolte, e il problema esiste ancora. Sai come posso verificare se l’evento “onchange” esiste ancora o se il nuovo selettore è stato cancellato in qualche modo? A proposito, proverò anche l’evento personalizzato. Grazie ancora.

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *