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 ...

È stato utile?

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:

  1. 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.
  2. 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);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top