No desenvolvimento real de aplicativos, costumamos usar eventos de módulo JS, mas às vezes encontramos alguns problemas, como eventos de clique. Para um exemplo simples, clique no botão "Enviar" fora do formulário para enviá-lo. Vamos codificar.
HTML:
Copie o código do código da seguinte forma:
<h3> Clique em "Enviar" e o evento de clique do botão de envio de teste também será acionado. </h3>
<button id="btn">Enviar</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="Não clique neste botão para enviar ainda" onclick="alert('Eu enviei');"/>
</form>
JavaScript:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método geral
btn.onclick=função(){
sub.clique();
}
</script>
Após o teste, não há problemas com IE, FF, Chrome, Opera e Safari, e o formulário pode ser enviado normalmente.
Mas no design real, para melhorar a aparência dos botões de envio, os construtores geralmente usam uma tag para processá-los e adicionar uma imagem de fundo para simular o botão. Ainda usamos a ideia acima para tentar adicionar uma tag a para permitir o envio. .Form, modificamos apenas o html.
HTML:
Copie o código do código da seguinte forma:
<h3> Clique em "Enviar" e o evento de clique do botão de envio de teste também será acionado. </h3>
<button id="btn">Enviar</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="Não clique neste botão para enviar ainda" onclick="alert('Eu enviei');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Chame o método para enviar o formulário aqui')">Botão Simular envio</a>
</form>
JavaScript:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método geral
btn.onclick=função(){
sub.clique();
}
</script>
Após a execução, o problema ocorreu no IE, FF e Opera, mas o Chrome e o Safari não funcionaram normalmente. Mais tarde, pesquisei on-line e descobri que o rótulo a não tem o mesmo evento onclick() do botão. A solução é para IE e FF escrevem lógicas diferentes, o código JS é o seguinte:
javascript:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método geral
btn.onclick=função(){
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} outro {
var e = document.createEvent('MouseEvent');
e.initEvent('clique', falso, falso);
sub.dispatchEvent(e);
}
}
</script>
Neste ponto, o problema está resolvido. Embora seja muito simples, é facilmente ignorado por todos. Postei para compartilhar com todos.
gramática:
criarEvento(eventType)
Descrição do parâmetro
eventType é o nome do módulo de evento do objeto Event que você deseja obter. Consulte a seção Descrição para obter uma lista de tipos de eventos válidos.
valor de retorno
Retorna um objeto Event recém-criado do tipo especificado.
Lançar
Se a implementação suportar o tipo de evento necessário, este método lançará uma DOMException com código NOT_SUPPORTED_ERR.
ilustrar
Este método cria um novo tipo de evento especificado pelo parâmetro eventType. Observe que o valor deste parâmetro não é o nome da interface de eventos a ser criada, mas sim o nome do módulo DOM que define essa interface.
A tabela a seguir lista os valores legais para eventType e a interface de evento criada por cada valor:
Método de inicialização da interface de evento de parâmetro
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Após criar o objeto Event utilizando este método, o objeto deve ser inicializado utilizando o método de inicialização mostrado na tabela acima. Para obter mais informações sobre métodos de inicialização, consulte Referência de objeto de evento.
Na verdade, esse método não é definido pela interface Document, mas pela interface DocumentEvent. Se uma implementação oferecer suporte ao módulo Event, o objeto Document implementará a interface DocumentEvent e oferecerá suporte a esse método.