Encaminhando eventos atributo JavaScript para diferentes manipulador / tipo
-
07-07-2019 - |
Pergunta
Atualmente estou tentando criar uma página web para um computador de tela de toque, e tenho notado que (com os meus dedos gordos) que eventos onclick são realmente difíceis de gatilho, como a área de superfície do meu dedo geralmente faz com que o cursor de se mover enquanto I "clique".
A solução que eu quero usar é o encaminhamento de onmousedown eventos de onclick. Como posso fazer este trabalho?
A melhor resposta seria ao longo das linhas de:
<input type="radio" onmousedown="this.onclick()"/>
(mas é claro em uma condição de trabalho)
EDIT: Meu exemplo específico é para botões de rádio - quando se é verificado os outros são desmarcada; Eu não quero ter que replicar esse comportamento em um evento personalizado quando o navegador dá-la para mim gratuitamente.
NOTA: Depois de ter editado e feedback recebido, eu acho que talvez eu poderia estar no caminho errado ... talvez não seja a função "clique" em um botão de rádio que realmente faz a seleção: novas sugestões boas-vindas ...
Solução
Ok, depois de suas edições, torna-se mais clara - o que você quer fazer é simular um usuário clicar no controle quando o evento mousedown
é acionado.
Duas opções:
- Você pode acionar o evento DOM - este tutorial sobre eventos DOM discute esta (veja eventos de disparo manualmente seção); Firing eventos javascript forrações similar.
- Set
onmouseout="this.checked = true;"
, ou seja, clicando no botão de rádio "cheques" / seleciona o botão de opção.
Outras dicas
Por que não apenas manipular o evento mousedown
?
Eu sei que você não mencionou isso na questão, mas se acontecer de você estar usando jQuery, seria realmente muito fácil:
$().live('mousedown', function() { this.click(); });
Talvez isso funciona para você
document.getElementById("yourinput").onmousedown = function() {
this.click();
}
Além disso, você poderia estilo seus botões de entrada / campos para ser um pouco maior, para melhor acessibilidade via o ponteiro.
É melhor ter uma única função para lidar com ambos os eventos, por exemplo.
var function = foo(e) {
...
};
<input onclick="foo();" onmousedown="foo();"/>
Melhor ainda utilizar discreto JavaScript, por exemplo, (Se você estivesse 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);