11521 sujets

JavaScript, DOM et API Web HTML5

[résolu][debutant]Arrêter un évenement

Bonjour,

Bonjour,
Je débute en Javascript et j'aurai besoin d'aide concernant l'utilisation des événements.
J'ai bien réussi à générer des événements mais je souhaiterais les arrêter après son déclenchement. Par exemple, dans le cas présenté ci dessous, lorsqu'un est réalisé sur le bouton, une image apparaît (ça j'ai réussi !!). Cependant, si on reclique sur le bouton, le menu apparaît une seconde fois.
et ainsi, de suite.....
Le but de l'opération c'est qu'une fois que l'image est apparu, il ne puisse plus réapparaître.
Je ne sais comment m'orienter.
Faut-il utiliser une condition ? Ou existe-t-il des fonctions permettant l'arrêt des événements ?

J'aurai besoin que l'on m'aiguille pour savoir où je dois apporter mes améliorations.
Je vous envoie les fichiers joints : le fichier html avec dedans le script javascript.

Merci d'avance,

Cdt, Squeek
<!DOCTYPE>
<HTML>

<HEAD>
    <meta charset="utf-8">
    <title>test</title>


</HEAD>

<body>
    <button onload="remp();" id="test1">Try it !!</button>
    <script type="text/javascript">
        function hello() {
            var myImg = new Image();

            myImg.src = 'powerred.png';


            document.body.appendChild(myImg);
        }

        function remp() {
            var moi = document.getElementById("test1");
            moi.addEventListener('click', hello, false);
        }
        window.onload = remp;
        stopPropagation(remp);

    </script>
</body>

</HTML>

Modifié par squeek (06 Feb 2016 - 10:45)
Bonjour,

Je pourrais faire ça facilement avec jQuery, mais je ne suis pas très à l'aise en VanillaJS, mais ce que tu dois faire, c'est dans ta fonction hello(), tu testes si tu as déjà l'image d'insérée dans le DOM (e.g. en lui collant un id), et ensuite un bête if !

EDIT : une version en jQuery
Modifié par SolidSnake (29 Jan 2016 - 12:17)
Ou plus simplement enlever l'écoute une fois l'image insérée :

        function hello() {
            var myImg = new Image();

            myImg.src = 'powerred.png';


            document.body.appendChild(myImg);
            moi.removeEventListener('click', hello, false);
        }

        function remp() {
            var moi = document.getElementById("test1");
            moi.addEventListener('click', hello, false);
        }
        window.onload = remp;
        stopPropagation(remp);
Hop je profite du sujet pour poser une question. Quel est l’intérêt de faire des addEventListener plutôt que des onclick directement dans le code ?

Moi j'aurai bien fait un truc comme ça (et vu que les variables statiques n'existe pas en javascript j'ai mis une closure, est ce qu'il vaut mieux une closure ou une variable 'globale'? Je trouve que les closures rendent le code un peu moins facilement lisible :s) : 
<!DOCTYPE html>
<html>
<body>

<button onclick="addImage()">Ajouter une image une seule fois</button>

<script>
var addImage= (function() {
        var ajoute = false;

	return function() {
            if(ajoute==false)
            {
              ajoute=true;
              var myImg = new Image();
              myImg.src = 'powerred.png';
              document.body.appendChild(myImg);
            }
	};
})();
</script>

</body>
</html>
Zelalsan a écrit :
Ou plus simplement enlever l'écoute une fois l'image insérée :

Oui, mais j'étais parti sur l'idée que peut-être l'image pourrait être supprimer du DOM, et que l'on puisse à nouveau cliquer sur le bouton...
... Sinon dans le même cas que toi, tu peux juste coller un disabled sur le bouton Smiley smile

mathieu1004 a écrit :
Quel est l’intérêt de faire des addEventListener plutôt que des onclick directement dans le code ?

il s'agit tout simplement de bien cloisonné et séparé l'HTML (l'architecture), le JS (l'intéractivité), et le CSS (le style : en évitant les styles inline)
SolidSnake a écrit :
Bonjour,

Je pourrais faire ça facilement avec jQuery, mais je ne suis pas très à l'aise en VanillaJS, mais ce que tu dois faire, c'est dans ta fonction hello(), tu testes si tu as déjà l'image d'insérée dans le DOM (e.g. en lui collant un id), et ensuite un bête if !

EDIT : une version en jQuery


Il y a plus simple avec jQuery : la méthode .one(). C'est identique à .on() sauf que ça ce déclenche qu'une seule fois.
Oken a écrit :
Il y a plus simple avec jQuery : la méthode .one(). C'est identique à .on() sauf que ça ce déclenche qu'une seule fois.

Je sais, je connais et j'y avais bien pensé Smiley cligne , mais Cf. la réponse que j'ai faite à Zelalsan. (ça oblige à recoller l'event si on veut relancer le processus)
En gros, tout dépend si l'on veut réutiliser le bouton à un moment donné ou pas (parce que l'on pourrait aussi très bien virer le bouton une fois l'image arrivée, y'a plus du tout de soucis comme ça !)
Bonjour, j'estime ce cas résolu, je développerais plus tard, puisque à terme, il faudra que j'incrémente d'autres fonctions.
Mais sinon grâce à ce script et à vos indications, ça fonctionne.

Voici le code :
<!DOCTYPE>
<HTML>

<HEAD>
    <meta charset="utf-8">
    <title>test</title>


</HEAD>

<body>
    <button onload="remp();" id="test1">Try it !!</button>
    <script type="text/javascript">
        function hello() {
            var myImg = new Image();

            myImg.src = 'powerred.png';
            var moi = document.getElementById("test1");


            document.body.appendChild(myImg);
            moi.removeEventListener('click', hello, false);
        }

        function remp() {
            var moi = document.getElementById("test1");
            moi.addEventListener('click', hello, false);
        }
        window.onload = remp;
    

    </script>
</body>

</HTML>

Modifié par squeek (06 Feb 2016 - 11:24)
Sujet clos
Aller à