evento onclick che non viene attivato dopo l'evento onchange

Qualcuno sa come eseguire un semplice evento JavaScript onclick se il processo di fare clic sull'elemento fa sì che un evento onchange venga attivato altrove nella pagina? Ho creato una pagina molto semplice per dimostrare questo problema:evento onclick che non viene attivato dopo l'evento onchange

<html> 
    <body> 
     <input type="text" name="test" id="test1" onchange="return change(event);" /> 
     <a href="#" id="test2" onclick="return bang();">Bang</a> 
     <a href="#" id="test3" onclick="return boom();">Boom</a> 
     <script type="text/javascript"> 
      function change(event) { 
       alert("Change"); 
       return true; 
      } 

      function bang() { 
       alert("Bang!"); 
       return true; 
      } 

      function boom() { 
       alert("Boom!"); 
       return true; 
      } 
     </script> 
    </body> 
</html>

Se si fa clic sul collegamento bang si ottiene il Bang! mettere in guardia. Boom ti dà l'avviso Boom. E se inserisci il testo nel campo di testo e premi il tabulatore, ottieni l'avviso di modifica. Tutto bene.

Tuttavia, se si immette del testo nel campo di testo e, senza fare tabulazioni o prima clic su qualsiasi altra cosa, fare clic su Bang o Boom si ottiene l'avviso Cambia e nient'altro. Mi aspetto di vedere l'avviso di modifica seguito da Bang o Boom.

Cosa sta succedendo qui? Il mio evento di cambiamento restituisce true. Come posso assicurarmi che il mio evento click sia licenziato?

fonte

2013-07-16 Robert MacGrogan

Suggerimento: crea un violino su http://jsfiddle.net/ e condividilo qui. Questo rende più facile per le persone provarlo e aiutare. –

Probabilmente dovresti usare addEventListener invece di assegnarli tramite html come suggerimento. – Sir

Provare con 'console.log' invece di' alert'. – j08691

Il problema è che la funzione alert() afferra la catena di eventi in qualche modo, provare questo:

<html> 
<body> 
    <input type="text" name="test" id="test1" onchange="return change(event);" /> 
    <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a> 
    <script type="text/javascript"> 
     function change(event) { 
      console.log("change"); 
      return true; 
     } 

     function bang() { 
      console.log("bang"); 
      return true; 
     } 

     function boom() { 
      console.log("boom"); 
      return true; 
     } 
    </script> 
</body>

Come si vedrà si otterrà il comportamento previsto nella console.

JSBin

fonte

2013-07-16 19:54:48 bitoiu

Grazie. Questo risolve il mio problema immediato. Mi sento un pazzo. :) –

Piuttosto che cercare di riprodurre il problema, ho appena creato la soluzione in jsFiddle.

Ho separato il tuo codice HTML e il tuo JavaScript.

HTML

<input type="text" name="test1" id="test1" /> 
<a href="#" id="test2">Bang</a> 
<a href="#" id="test3">Boom</a>

JavaScript

var test1 = document.getElementById("test1"); 
var test2 = document.getElementById("test2"); 
var test3 = document.getElementById("test3"); 

test1.onchange = function (event) { 
    alert("Change"); 
}; 

test2.onclick = function() { 
    alert("Bang!"); 
}; 

test3.onclick = function() { 
    alert("Boom!"); 
};

Dopo aver effettuato un cambiamento nella casella di testo e fare clic fuori lato di esso attiverà l'evento onchange, ei onclick eventi saranno ancora fuoco. Se si prevede che l'avviso di modifica venga attivato per ogni modifica del tratto di chiave, onchange a onkeyup.

fonte

2013-07-16 20:21:54 defaultNINJA

Hai ricreato il problema ... Questo codice ha lo stesso difetto dell'originale che è stato pubblicato dal richiedente. – Steven

@Steven Quindi non vedo veramente quale sia il difetto, a meno che non sia specifico del browser. Perché con Chrome non ho alcun problema. – defaultNINJA

Scusate, avrei dovuto spiegarlo. Il problema che sta avendo è che quando scrivi qualcosa nel campo di input e poi _immediately_ fai clic su uno dei link (cioè prima di uscire da 'input' o fare clic in qualsiasi altro punto della pagina) l'evento' onclick' non lo fa t fire (quando c'è un 'alert (...)' nell'evento 'onchange' di' input'). Il tuo codice si basa sul fatto che hai già cambiato il focus da 'input' prima di fare clic sul link testuale. (C'è una possibilità che questo comportamento non si verifichi nel tuo browser ... Ho provato con FF un Chromium. ** Fix ** sarebbe stato cambiato in 'onmousedown' (vedi sopra) – Steven

Okay ... Quindi sembra che sia tempo per un po 'di spiegazione.

Spiegazione

si verifica questo errore perché l'evento onchange viene attivato non appena messa a fuoco è spostato lontano dalla griglia. Nel tuo esempio l'azione che si allontana dall'elemento input è l'evento mousedown che si attiva quando fai clic su sul mouse. Ciò significa che quando si esegue il collegamento mousedown, viene attivata la funzione onchange e viene visualizzato l'avviso.

La onclick evento d'altra parte viene attivato l'evento mouseup (vale a dire quando si rilascia la pressione sul mouse - dimostrare questo a te stesso click, hold/pause, release su un evento onlcick). Torna alla tua situazione ... Prima dello mouseup (ad es.onclick), lo spostamento viene spostato su alert attivato dalla funzione onchange.

Fix

ci sono un paio di opzioni per risolvere questo problema. Cambio più semplice dall'uso di onclick="...." a onmousedown="....".

In alternativa, è possibile utilizzare come setTimeout ,:

function change() { 
    setTimeout(function(){ 
     alert("Change event") 
    }, 100) 
}

suggerisco il metodo onmousedown come preferito. Il metodo setTimeout avrà esito negativo se si si fa clic e si tiene premuto sul collegamento per un importo superiore all'importo prescritto per il timeout.

fonte

2013-07-16 21:54:48 Steven

evento onclick che non viene attivato dopo l'evento onchange

risposta

Problemi correlati