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.

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

philodick

9 septembre 2019 à 16:55:58

Bonjour,

Un blur ne fonctionne pas ? : https://www.w3schools.com/jsref/event_onblur.asp

N'oubliez pas d'activer les erreurs PDO.

bocaldesmers

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

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

philodick

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>

N'oubliez pas d'activer les erreurs PDO.

bocaldesmers

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

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

AnneHuard

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);

bocaldesmers

11 septembre 2019 à 20:53:31

Super merci AnneHuard, très efficace comme solution et aussi très simple

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