Lorsque je passe la souris sur un bouton, une fonction activée par onmouseover se déclenche en continu toutes les fractions de seconde. Je veux qu'il ne se déclenche qu'une seule fois.
Je dois utiliser onmouseover sur un bouton pour appeler une fonction d'envoi car je ne peux pas utiliser onclick car il interfère avec une autre fonction qui est appelée onclick. Si j'utilise onmouseout, cela fonctionne bien et ne se déclenche qu'une seule fois, mais onmouseout n'est pas satisfaisant pour mon objectif. J'ai essayé d'autres gestionnaires d'événements, notamment onmouseenter et onmousedown, mais ils souffrent du même problème. J'ai aussi essayé ceci: onmouseover = "submitForm (); button.onmouseover = null;"
<script language="javascript" type="text/javascript">
function submitForm() {
$("#pform").submit();
}
</script>
<input type="button" onmouseover="submitForm();" />
Lorsque le bouton est déplacé, la fonction se déclenche en continu, plusieurs fois par seconde . Je veux qu'il ne se déclenche qu'une seule fois.
6 Réponses :
$(element).one('mouseover' function(){
// your function here
});
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change. - De l'avis
Je suppose qu'il a besoin d'une fonction qui s'exécute une fois. mais si vous voulez que je vous donne une référence à partir de ma réponse, c'est ici .. w3schools.com/jquery/ event_one.asp
Vous pouvez utiliser une logique simple pour vérifier si l'événement survolé avec la souris entre pour la première fois. Utilisez le stockage local, si le stockage local n'est pas défini initialement, c'est la première fois que l'événement survole la souris.
Sinon, si le stockage local est déjà défini sur true, ne déclenchez pas l'envoi du formulaire.
<script language="javascript" type="text/javascript">
function submitForm() {
if(sessionStorage.getItem("mouse_over") == undefined){
sessionStorage.setItem("mouse_over","true");
$("#pform").submit();
}else{
}
}
</script>
<input type="button" onmouseover="submitForm();" />
Cela ne fonctionne pas si vous avez plusieurs fenêtres affichant la même page. Et cela laisse des déchets en mémoire lorsque la fenêtre est fermée. Utiliser sessionStorage serait mieux. Mais de toute façon, cela ne s'attaque pas à la cause profonde. Il est étrange qu'un formulaire entier soit soumis uniquement lorsque l'utilisateur survole un bouton. Onclick serait mieux, mais il semble y avoir un problème avec onclick.
Je vais le modifier dans le stockage de session. Oui au clic est la meilleure option. Je ne sais pas pourquoi @vago doit utiliser la souris.
Maintenant j'ai ceci -
admiraalit - J'ai essayé votre code et il ne se soumet pas. Après de nombreuses tentatives en utilisant onclick et .click, j'ai trouvé que c'était soit ou: le javascript fonctionne et la soumission ne fonctionne pas ou la soumission fonctionne et le javascript ne fonctionne pas. Les deux ont besoin du texte dans une zone de texte. Je pourrais m'en tenir à la soumission à la souris qui fonctionne, s'il y avait un moyen d'afficher le message indiquant que la connexion est requise en haut du bouton autre que l'écho de php qui ne va pas à l'encontre du bloqueur de fenêtres contextuelles, mais il aurait besoin de la connexion état du serveur.
Désolé, j'ai manqué la partie sur le $ (document) .ready (function () {...}); Je n'en ai pas, je ne connais rien à jquery puisque toute mon expérience de programmation date de l'ère des dinosaures. Dois-je en avoir un? Qu'est-ce qui devrait y entrer.
Apparemment, lorsque vous soumettez le formulaire, la page est rechargée. Après le rechargement, la souris est toujours sur le bouton et l'événement est à nouveau déclenché.
Il n'est pas courant d'utiliser onmouseover pour soumettre un formulaire. Vous avez écrit que vous n'utilisez pas onclick, car cela interfère avec une autre fonction appelée onclick. Si c'est la seule raison, essayez d'éviter les interférences comme suit.
Modifiez le bouton comme suit:
$("#clickbutton").click(function(e) {
e.stopPropagation();
$("#pform").submit();
});
Recherchez le $ (document) .ready (function () { ... }); dans votre page et ajoutez le code suivant à l'intérieur:
<input type="button" id="clickbutton" />
J'ai ajouté ceci à la page et l'id = "clickbutton" sur le bouton. Maintenant, la soumission fonctionne parfaitement mais pas le javascript qui s'exécute onclick. Je suis à peu près sûr que c'est parce qu'ils ont tous les deux besoin du texte dans la zone de texte du formulaire.
Je me suis cogné la tête contre le fait d'essayer d'empêcher l'actualisation de la page après l'envoi, mais à défaut, j'ai fini par utiliser localSrorage pour restaurer les valeurs du formulaire.
D'accord, je suis content que vous ayez trouvé une solution.
Merci pour vos bons conseils pour résoudre le problème d'envoi continu, mais malheureusement, cela ne résout pas le problème que je ne peux pas exécuter le javascript texte-voix et la fonction d'envoi à la fois à partir du même événement de clic.
Une autre solution peut-être: laissez PHP générer une variable globale isLoggedIn qui vous indique si l'utilisateur est connecté ou non. Dans la balise d'entrée, utilisez un simple événement onclick. Dans le gestionnaire d'événements, au lieu de soumettre le formulaire, vérifiez la variable globale et si l'utilisateur n'est pas connecté, affichez le message. Vous pouvez également utiliser onmouseover. Parce que vous ne soumettez pas, vous n'avez pas le problème.
Admiraalit - J'essaye votre dernière suggestion. C'est côté client appelé onmouseover
<script>
function checkLoginStatus() {
jQuery.ajax({
type: "POST",
url: "checkstatus.php",
success: function(res){
if(res == "0") {
alert("Login Required");
}
}
});
}
</script>
and this is checkstatus.php
<?php
session_start();
echo "checking status";
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
J'ai vérifié avec une boîte d'alerte que checkLoginStatus () est appelé, mais rien ne se passe autrement. Quel est le problème?
J'essaie peut-être de rendre cela trop compliqué - peut-être pourrais-je simplement faire écho à mon message de connexion directement depuis php dans checkstatus.php? mais faudrait-il encore un retour? quelque chose qui arrive pour le succès:? Je suis un poisson hors de l'eau avec jquery ajax et j'ai oublié tout ce que je savais sur l'ajax à l'ancienne :(
Avez-vous essayé d'ajouter une variable pour savoir si vous l'avez déjà soumise? Par exemple:
<script language="javascript" type="text/javascript">
var formSubmitted = false;
function submitForm() {
if (!formSubmitted){
$("#pform").submit();
formSubmitted = true;
}
}
</script>
<input type="button" onmouseover="submitForm();" />
Cela devrait garantir que cela n'arrive qu'une seule fois (même si submitForm () est appelé plusieurs fois).
Cela n'empêche pas le comportement, probablement parce qu'à chaque actualisation, var formSubmitted est réinitialisé à false.
Cela fonctionne. Je pense que le problème était la déclaration d'écho supplémentaire que j'ai mise dans checkstatus.php pour les tests.
<script>
function checkLoginStatus() {
jQuery.ajax({
type: "POST",
url: "checkstatus.php",
success: function(res){
if(res == "0") {
alert("need to log in");
}
}
});
}
</script>
<?php
session_start();
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
<?php
session_start();
if(isset($_SESSION["username"]))
{
echo "1";
} else {
echo "0";
}
?>
Cela fournit le message non connecté et je peux soumettre en utilisant onmouseout donc tout va bien. Merci à tous.
Je pense que vous recherchez l'événement "OnMouseEnter". developer.mozilla.org/en-US/docs/Web/ API / Élément /…
J'ai essayé OnMouseEnter Cela pose le même problème que onmouseover
Je pense que c'est parce que lorsque le formulaire est soumis, la page entière est rechargée. Pouvez-vous vérifier si tel est le cas? Veuillez fournir plus d'informations sur les raisons pour lesquelles onclick ne fonctionne pas.
@vago Ensuite, il y a autre chose qui ne va pas avec votre code. L'événement ne sera déclenché que lorsque votre curseur entre dans l'élément.
Oui, admiraalit, je crois que c'est le cas que la page entière se recharge. L'icône de rechargement du navigateur clignote.
Robin, l'événement se déclenche lorsque le curseur entre dans l'élément, mais il se déclenche à plusieurs reprises jusqu'à ce que le curseur quitte l'élément. Les bits de code que j'ai fournis affichent ce comportement.
Essayez d'empêcher l'envoi (pourquoi en avez-vous besoin?) Ou essayez de résoudre le problème que vous rencontrez avec onclick (veuillez fournir plus d'informations sur l'autre fonction avec laquelle elle interfère; peut-être pouvons-nous résoudre ce problème)
Le code que vous avez fourni se déclenchera à plusieurs reprises puisque vous utilisez onmouseover. Mais il semble que @ www.admiraalit.nl l'ait résolu pour vous.
www.admiraalit.nl Je crois que vous fournissez l'explication de ce qui se passe - lorsque la page s'actualise après une soumission, le curseur est toujours sur le bouton, donc l'événement onmouseover se déclenche à nouveau. La fonction onclick est énorme et très complexe, et minifiée, je ne comprends pas grand-chose, elle n'a pas été écrite par moi. Il est très sensible à tout ce qui se passe sur le même bouton qui l'active. La solution de Shankar le détruit, provoquant l'apparition de jibberish à l'écran. Je ne sais pas comment mettre en œuvre la solution de Vincent dans ce cas. Cela fonctionnerait-il lorsque le problème est dû à l'actualisation de la page?
Le formulaire doit être soumis. La solution de Shankar le détruit, provoquant l'apparition de jibberish à l'écran. Je ne sais pas comment mettre en œuvre la solution de Vincent dans ce cas. Cela fonctionnerait-il lorsque le problème est dû à l'actualisation de la page? J'essaie de soumettre le formulaire avant le clic sur le bouton car je veux que php fasse écho à un message indiquant que la connexion est requise (évitant ainsi le bloqueur de popup). Concernant sessionStorage, je souhaite que l'utilisateur puisse renvoyer intentionnellement le formulaire dans la même session.
Les deux solutions de Shankar avec localStorage et sessionStorage font apparaître ceci à l'écran - quelque chose à voir avec la fonction onclick: ") .val (this.name) .text (this.name));});
À l'avenir, veuillez mettre des commentaires sur des réponses spécifiques sous ces réponses.