Is it possible to detect click events without relying on the window object? I encountered an issue where the Airbnb user navigation menu triggered when clicking anywhere in the browser, including the Windows taskbar. Is there a way to achieve this with JavaScript?
If you want to only listen for a specific element's click event instead of the entire window, you can add a click listener directly to that element.
Here is an example:
index.html
<button id="button">button</button>
script.js
const buttonEl = document.getElementById("#button")
buttonEl.addEventListener("click", function() {
// handle click
})
Edit: While I have not tested this myself, I believe you may be able to achieve a similar outcome by using the blur event.
Here is an example:
document.addEventListener('blur', function(){console.log('document blur')});
window.addEventListener('blur', function(){console.log('window blur')});
If you're looking to implement an overlay technique, consider the following approach:
const button = document.querySelector("#button");
const navigation = document.querySelector("#navigation");
const overlay = document.querySelector("#overlay");
let isOpen = false;
function toggleOverlay() {
if ((isOpen = !isOpen)) {
navigation.style.display = "block";
overlay.style.display = "block";
} else {
navigation.style.display = "none";
overlay.style.display = "none";
}
}
button.onclick = () => {
toggleOverlay();
};
overlay.onclick = () => {
toggleOverlay();
};* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
padding: 20px;
}
#container {
display: inline-block;
position: relative;
}
#button {
background-color: whitesmoke;
border: 1px solid lightgray;
border-radius: 3px;
font-size: 20px;
width: 46px;
line-height: 40px;
}
#navigation {
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="button">≡</button>
<div id="overlay"></div>
<nav id="navigation">
<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 also have the option to make the overlay color fully transparent...
This situation differs from the one discussed in Remove dom element without knowing its parent?, because their element has a parentNode. While I am familiar with removing an element through its parentNode, creating a new element poses a different challeng ...
class B{ item = {}; item.name = "example"; } let b = new B() What is the reason behind not being able to define an object and add a property inside a class like this? ...
I'm currently facing a challenge with handling HTTP errors in an Angular2 observable. Here's what I have so far: getContextAddress() : Observable<string[]> { return this.http.get(this.patientContextProviderURL) .map((re ...
Is there a simple and effective way to locate child nodes within an iframe using Angular in order to access the HTML element? Currently, I have implemented the following method: I designated a reference variable within my iframe (#privacyPolicy) <ifra ...
As I develop a website featuring an HTML course, I've opted for a consistent format for each lesson or page. One detail I've been working on involves setting a link within a button to a variable enclosed in quotes. For instance, I utilize the cod ...
I've been encountering difficulties while trying to click on a checkbox during the checkout process on Footlocker Au's website. Despite searching online and attempting to use selector and xpath methods, I have not been successful. https://i.ssta ...
I'm working with a basic HTML file where I need to generate SVGs based on data retrieved through an AJAX call. Do I need to ensure the document is fully loaded by enclosing my code within a document.onload = function() { ... } block, or can I assume ...
Can you explain why this Javascript code: var myArray = new Array(3); does not produce the same result as: var otherArray = [null, null, null]; ? Keep in mind that (myArray == otherArray) returns false. Additionally, is there a way to create an ...
When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...
Every time I click on the Button, the first click triggers func1 successfully. However, subsequent clicks fail to execute the function. Even the alert('func1') statement is not being displayed. What mistake am I making here? func ...
Trying to set up the Volar VSCode extension for a NuxtJS / Typescript project and facing two issues in .vue file templates. Followed the installation guide for Vue 2 and Typescript, and enabled Take Over mode. Solved some codebase issues with the extensio ...
Once I have decoded my data from base 64 to binary, my next step is to unzip this information. In my project, I am using node.js instead of PHP, which has a convenient gzdecode() function for decompressing data. However, with node.js, I am unsure of how t ...
I am currently working on creating a basic web page with a few input fields that must be filled out to proceed. Below is the code I have so far: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/l ...
Whenever I click on one of the DIV elements, a menu pops out on the side displaying more information about the clicked element. I can determine which element I'm clicking on, but I'm struggling to pass that information from jQuery to the PHP pag ...
I'm having an issue with the layout of my webpage. The new content I add appears below the navbar on the left side of the page instead of beside it. Can someone help me troubleshoot this problem? Below, you'll find the relevant HTML and CSS code ...
Imagine having a function like this index.js greet = () => { console.log('hello'); } greet(); and you want it to execute as soon as the page loads, so you include greet();. This works fine when the file is imported in your index.html in ...
I am looking to implement a PHP script that will serve combined, pre-gzipped, and minified JS and CSS files. You can find the source code for this script here: https://code.google.com/p/compress/ I have a WAMP localhost with WordPress install ...
EDIT: I accidentally omitted a piece of relevant code I am looking to access the "jsonData" value from my server in my JavaScript file. Can someone guide me on how to retrieve these values? Here is the server-side code: var express = require('expre ...
I developed two separate VueJS components - one displaying a modal and the other featuring HTML input fields. When I attempt to nest these two components, the inner component fails to appear in the DOM. What could be causing this issue? Here's a snip ...
One question I have is related to routing in Vue.js: // routes.js { path: '/posts', name: 'Posts', component: PostsView }, { path: '/post/:post_id', name: 'PostRead', component: PostReadView, }, { pat ...