Partage
  • Partager sur Facebook
  • Partager sur Twitter

click en dehor d'un element

Sujet résolu
    8 septembre 2019 à 17:32:18

    Bonjour à tous, j'aimerais savoir si il existe une solution permettant de savoir quand on click en dehors d'un élément.

    exemple:

    <body>
        <div id="menu">Cliquez ici</div>
    
        <!-- le reste de ma page -->
    </body>
    var menu = document.getElementById('menu');
    
    menu.addEventListener('click', function()
    {
        this.innerHTML = '<ul><li><a href="accueil.php">Accueil</a></li><li><a href="page1.php"page1</a></li><li><a href="page2.php">page2</a></li></ul>';
    }, false);

    J'aimerais maintenant pouvoir faire en sorte que si l'on click en dehors de la div et de son contenu, elle retrouve son état initial.

    Merci d'avance.


    • Partager sur Facebook
    • Partager sur Twitter

    Quand on fait tout, on est bon en rien...

      9 septembre 2019 à 17:45:35

      Il me semble que focus et blur ne fonctionnent que sur des élément de type formulaire genre input ou textarea pas sur des div ou autre.

      J'ai réussi à faire à peu pret ce que je voulais en faisant comme ceci, mais je ne suis pas sur que ce soit très optimal comme solution:

      var menu = document.getElementById('menu');
      
      function test()
      {
          menu.onclick = function()
          {
              this.innerHTML = '<ul id="ul"><li><a href="accueil.php">Accueil</a></li><li><a href="page1.php"page1</a></li><li><a href="page2.php">page2</a></li></ul>';
      
               var testWindowClick = false;
                  
               window.onclick = function(e)
               {
                   var Etarget = e.target;
                   var ul = document.getElementById('ul');
      
                   if(typeof Etarget.parentNode != 'undefined' && Etarget.parentNode.id != 'ul' && testWindowClick == true)
                   {
                       menu.innerHTML = 'Cliquez ici';
                       window.onclick = '';
                       test();
                   }
      
                   testWindowClick = true;
               };
          }, false);
      }
      
      test();

      -
      Edité par bocaldesmers 9 septembre 2019 à 18:00:56

      • Partager sur Facebook
      • Partager sur Twitter

      Quand on fait tout, on est bon en rien...

        9 septembre 2019 à 19:52:25

        Tu as essayé ? Parce que la doc ne dit pas ça :

        Supported HTML tags: ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

        • Partager sur Facebook
        • Partager sur Twitter
          9 septembre 2019 à 20:29:50

          En fait les élément de type input prennent automatiquement le focus des que l'on click dessus et le perdent des que l'on click ailleurs. grace à ça, on peu utiliser les événement focus et blur pour savoir si on click ou si on sort d'un input. Mais une div un p ou autre n'ont pas cette propriété, ils ne prennent pas le focus si l'on click dessus, du coup ils ne le perdent pas si l'on click à coté.

          La seul solution pour savoir si on click sur un élément est l'évènement click, par contre il n'y a pas d'évènement pour savoir si l'on click ailleurs

          -
          Edité par bocaldesmers 9 septembre 2019 à 20:31:52

          • Partager sur Facebook
          • Partager sur Twitter

          Quand on fait tout, on est bon en rien...

            10 septembre 2019 à 23:36:31

            Bonjour,

            Il te suffit de mettre un écouteur de clcik sur document

            document.addEventListener("click",function (evt) {
             ...ton code 
            });

            et pour empecher que ce code s'exécute lorsque tu cliques sur la div, il te suffit d'empêcher la propagation de l'événement

            menu.addEventListener('click', function(evt)
            {
                this.innerHTML = '<ul><li><a href="accueil.php">Accueil</a></li><li><a href="page1.php"page1</a></li><li><a href="page2.php">page2</a></li></ul>';
            evt.stopPropagation();
            }, false);
            • Partager sur Facebook
            • Partager sur Twitter
              11 septembre 2019 à 20:53:31

              Super merci AnneHuard, très efficace comme solution et aussi très simple :D:D:D
              • Partager sur Facebook
              • Partager sur Twitter

              Quand on fait tout, on est bon en rien...

              click en dehor d'un element

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown