Inoltro di eventi attributo javascript a diversi gestori / tipi
-
07-07-2019 - |
Domanda
Attualmente sto cercando di impostare una pagina Web per un computer touchscreen e ho notato che (con le mie dita grasse) quegli eventi onclick sono davvero difficili da attivare, poiché la superficie del mio dito generalmente provoca il cursore per spostarti mentre io " fai clic " ;.
La soluzione che voglio usare è l'inoltro di eventi onmousedown a onclick. Come posso farlo funzionare?
La migliore risposta sarebbe sulla falsariga di:
<input type="radio" onmousedown="this.onclick()"/>
(ma ovviamente funzionante)
EDIT: il mio esempio specifico è per i pulsanti di opzione - quando uno è spuntato gli altri sono deselezionati; Non voglio replicare questo comportamento in un evento personalizzato quando il browser me lo dà gratuitamente.
NOTA: dopo aver modificato e ricevuto feedback, penso che forse potrei essere sulla strada sbagliata ... forse non è il " fai clic " funzione su un pulsante di opzione che esegue effettivamente la selezione: nuovi suggerimenti benvenuti ...
Soluzione
Ok, dopo le tue modifiche diventa più chiaro - quello che vuoi fare è simulare un utente facendo clic sul controllo quando viene attivato l'evento mousedown
.
Due opzioni:
- Puoi attivare l'evento DOM: questo tutorial sugli eventi DOM discute questo (vedere la sezione Eventi di attivazione manuale ); Attivazione di eventi Javascript copre un terreno simile.
- Imposta
onmouseout = " this.checked = true; "
, ovvero facendo clic sul pulsante di opzione " controlla " / seleziona il pulsante di opzione.
Altri suggerimenti
Perché non gestire l'evento mousedown
?
So che non l'hai menzionato nella domanda, ma se ti capita di usare jQuery, sarebbe davvero molto semplice:
$().live('mousedown', function() { this.click(); });
Forse questo funziona per te
document.getElementById("yourinput").onmousedown = function() {
this.click();
}
Inoltre puoi modellare i tuoi pulsanti / campi di input in modo che siano leggermente più grandi, per una migliore accessibilità tramite il puntatore.
È meglio avere un'unica funzione per gestire entrambi gli eventi, ad esempio
var function = foo(e) {
...
};
<input onclick="foo();" onmousedown="foo();"/>
Meglio usare comunque JavaScript discreto, ad es. (se stavi usando YUI):
<input id="input-el"/>
var function = foo(e) {
...
};
var Event = YAHOO.util.Event;
Event.on('input-el', 'click', foo);
Event.on('input-el', 'mousedown', foo);