Question 230379 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Detect Browser clicks other than the window object

Is there any way to listen click events other than the window object? I got this problem when I found airbnb user nav menu triggers when click on anywhere in the browser. Even click on the windows taskbar. Is this possible with javascript?

enter image description here

Tags:

2

Answers


  1. 0

    you can listen to specific element click event rather than the whole window by adding a click listener to the element

    Here’s the example of it:

    index.html

    <button id="button">button</button>

    script.js

    const buttonEl = document.getElementById("#button")
buttonEl.addEventListener("click", function() {
  // handle click
})

    Edit: I haven’t tried it, but i think you can reproduce similar action by using blur event.

    Here’s an example:

    document.addEventListener('blur', function(){console.log('document blur')});
window.addEventListener('blur', function(){console.log('window blur')});
    Login or Signup to reply.
  2. 0

    You can use an overlay technique like below:

    const btn = document.querySelector("#btn");
const nav = document.querySelector("#nav");
const overlay = document.querySelector("#overlay");

let open = false;

function changeState() {
    if ((open = !open)) {
        nav.style.display = "block";
        overlay.style.display = "block";
    } else {
        nav.style.display = "none";
        overlay.style.display = "none";
    }
}

btn.onclick = () => {
    changeState();
};

overlay.onclick = () => {
    changeState();
};
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    padding: 20px;
}

#container {
    display: inline-block;
    position: relative;
}

#btn {
    background-color: whitesmoke;
    border: 1px solid lightgray;
    border-radius: 3px;
    font-size: 20px;
    width: 46px;
    line-height: 40px;
}

#nav {
    background-color: white;
    position: absolute;
    top: 0;
    left: 100%;
    width: max-content;
    display: none;
    z-index: 10000;
}

ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px
}

ul > li {
    padding: 5px 10px;
}

#overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.2);
}
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Title</title>
    </head>
    
    <body>
        
        <main>
            <div id="container">
                <button id="btn">&equiv;</button>
                
                <div id="overlay"></div>
                
                <nav id="nav">
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </nav>
            </div>
        </main>
        
        <script src="script.js"></script>
    </body>
</html>

    you may change the overlay color to be fully transparent if you want…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search