En el desarrollo de aplicaciones reales, a menudo usamos eventos del módulo JS, pero a veces encontramos algunos problemas, como eventos de clic. Para un ejemplo simple, haga clic en el botón "Enviar" fuera del formulario para enviar el formulario. Codifiquemos.
HTML:
Copie el código de código de la siguiente manera:
<h3> Haga clic en "Enviar" y también se activará el evento de clic del botón de envío de prueba. </h3>
<button id="btn">Enviar</button>
<formulario acción="#" método="obtener" id="formulario">
<tipo de entrada="texto" nombre="sitio" valor="www.woiweb.net" solo lectura/>
<input id="subbtn" type="submit" value="No haga clic en este botón para enviar todavía" onclick="alert('He enviado');"/>
</formulario>
JavaScript:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método general
btn.onclick = función() {
sub.hacer clic();
}
</script>
Después de la prueba, no hay problemas con IE, FF, Chrome, Opera y Safari, y el formulario se puede enviar normalmente.
Pero en el diseño real, para que los botones de envío se vean mejor, los constructores suelen usar una etiqueta para procesarlos y agregar una imagen de fondo para simular el botón. Todavía usamos la idea anterior para intentar agregar una etiqueta para permitir el envío. . Formulario, solo modificamos el html.
HTML:
Copie el código de código de la siguiente manera:
<h3> Haga clic en "Enviar" y también se activará el evento de clic del botón de envío de prueba. </h3>
<button id="btn">Enviar</button>
<formulario acción="#" método="obtener" id="formulario">
<tipo de entrada="texto" nombre="sitio" valor="www.woiweb.net" solo lectura/>
<!--<input id="subbtn" type="submit" value="No haga clic en este botón para enviar todavía" onclick="alert('He enviado');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Llame al método para enviar el formulario aquí')">Simular botón de envío</a>
</formulario>
JavaScript:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método general
btn.onclick = función() {
sub.hacer clic();
}
</script>
Después de ejecutarlo, ocurrió el problema. IE, FF y Opera estaban bien, pero Chrome y Safari no pudieron ejecutarse normalmente. Más tarde, busqué en línea y descubrí que la etiqueta a no tiene el mismo evento onclick() que el botón. La solución es que IE y FF escriben una lógica diferente, el código JS es el siguiente:
javascript:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//método general
btn.onclick = función() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("al hacer clic");
} demás {
var e = document.createEvent('MouseEvent');
e.initEvent('hacer clic', falso, falso);
sub.dispatchEvent(e);
}
}
</script>
En este punto, el problema está resuelto. Aunque este problema es muy simple, todos lo ignoran fácilmente. Lo publiqué para compartirlo con todos.
gramática:
crearEvento(tipo de evento)
Descripción del parámetro
eventType es el nombre del módulo de evento del objeto de evento que desea obtener. Consulte la sección Descripción para obtener una lista de tipos de eventos válidos.
valor de retorno
Devuelve un objeto Evento recién creado del tipo especificado.
Tirar
Si la implementación admite el tipo de evento requerido, este método generará una excepción DOMException con el código NOT_SUPPORTED_ERR.
ilustrar
Este método crea un nuevo tipo de evento especificado por el parámetro eventType. Tenga en cuenta que el valor de este parámetro no es el nombre de la interfaz del evento que se creará, sino el nombre del módulo DOM que define esa interfaz.
La siguiente tabla enumera los valores legales para eventType y la interfaz de evento creada por cada valor:
Método de inicialización de la interfaz de eventos de parámetros
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Después de crear el objeto Evento usando este método, el objeto debe inicializarse usando el método de inicialización que se muestra en la tabla anterior. Para obtener más información sobre los métodos de inicialización, consulte Referencia de objetos de eventos.
En realidad, este método no está definido por la interfaz Document, sino por la interfaz DocumentEvent. Si una implementación admite el módulo Event, entonces el objeto Documento implementa la interfaz DocumentEvent y admite este método.