Dans le développement d'applications réelles, nous utilisons souvent des événements de module JS, mais nous rencontrons parfois des problèmes, tels que des événements de clic. Pour un exemple simple, cliquez sur le bouton « Soumettre » en dehors du formulaire pour soumettre le formulaire. Codons.
HTML :
Copiez le code comme suit :
<h3> Veuillez cliquer sur "Soumettre", et l'événement de clic du bouton de soumission du test est également déclenché. </h3>
<button id="btn">Envoyer</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<input id="subbtn" type="submit" value="Ne cliquez pas encore sur ce bouton pour soumettre" onclick="alert('J'ai soumis');"/>
</form>
Javascript :
Copiez le code comme suit :
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//méthode générale
btn.onclick = fonction() {
sub.click();
}
</script>
Après les tests, il n'y a aucun problème avec IE, FF, Chrome, Opera et Safari, et le formulaire peut être soumis normalement.
Mais dans la conception réelle, afin d'améliorer l'apparence des boutons de soumission, les constructeurs utilisent souvent une balise pour les traiter et ajoutent une image d'arrière-plan pour simuler le bouton. Nous utilisons toujours l'idée ci-dessus pour essayer d'ajouter une balise a pour le laisser soumettre. . Form, nous modifions uniquement le html.
HTML :
Copiez le code comme suit :
<h3> Veuillez cliquer sur "Soumettre", et l'événement de clic du bouton de soumission du test est également déclenché. </h3>
<button id="btn">Envoyer</button>
<form action="#" method="get" id="form">
<input type="text" name="site" value="www.woiweb.net" readonly/>
<!--<input id="subbtn" type="submit" value="Ne cliquez pas encore sur ce bouton pour soumettre" onclick="alert('J'ai soumis');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Appelez la méthode pour soumettre le formulaire ici')">Simuler le bouton de soumission</a>
</form>
Javascript :
Copiez le code comme suit :
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//méthode générale
btn.onclick = fonction() {
sub.click();
}
</script>
Après l'exécution, le problème est survenu. IE, FF et Opera étaient tous OK, mais Chrome et Safari n'ont pas pu fonctionner normalement. Plus tard, j'ai effectué une recherche en ligne et j'ai découvert que l'étiquette a n'avait pas le même événement onclick() que le bouton. La solution est pour IE et FF écrit une logique différente, le code JS est le suivant :
javascript :
Copiez le code comme suit :
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//méthode générale
btn.onclick = fonction() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} autre {
var e = document.createEvent('MouseEvent');
e.initEvent('clic', false, false);
sub.dispatchEvent(e);
}
}
</script>
À ce stade, le problème est résolu. Bien que ce problème soit très simple, il est facilement ignoré par tout le monde. Je l'ai posté pour le partager avec tout le monde.
grammaire:
créer un événement (type d'événement)
Description des paramètres
eventType est le nom du module d'événement de l'objet Event que vous souhaitez obtenir. Consultez la section Description pour obtenir une liste des types d'événements valides.
valeur de retour
Renvoie un objet Event nouvellement créé du type spécifié.
Lancer
Si l'implémentation prend en charge le type d'événement requis, cette méthode lèvera une DOMException avec le code NOT_SUPPORTED_ERR.
illustrer
Cette méthode crée un nouveau type d'événement spécifié par le paramètre eventType. Notez que la valeur de ce paramètre n'est pas le nom de l'interface événementielle à créer, mais le nom du module DOM qui définit cette interface.
Le tableau suivant répertorie les valeurs légales pour eventType et l'interface d'événement créée par chaque valeur :
Méthode d'initialisation de l'interface d'événement de paramètre
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Après avoir créé l'objet Event à l'aide de cette méthode, l'objet doit être initialisé à l'aide de la méthode d'initialisation indiquée dans le tableau ci-dessus. Pour plus d’informations sur les méthodes d’initialisation, consultez Référence des objets d’événement.
Cette méthode n'est en réalité pas définie par l'interface Document, mais par l'interface DocumentEvent. Si une implémentation prend en charge le module Event, alors l'objet Document implémente l'interface DocumentEvent et prend en charge cette méthode.