Identify when a click occurs outside specific elements

Question

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using:

var specifiedElement = document.getElementById('a');
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (!isClickInside) {
    alert('You clicked outside A and B')
  }
});

div {
  background: #aaa;
  height:2em;
  padding: 1em;
  margin-bottom:10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

(View in JS Fiddle: https://jsfiddle.net/1zj9dmq7/)

I am trying to achieve a functionality where the "alert" function only runs when clicking outside of elements a and b, not when clicking on them directly, and without using jQuery. If anyone can assist me with this, I would greatly appreciate it. Thank you.

javascript html css

Answer 1

Answer №1

Give this a shot:

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

document.addEventListener('click', function(event) {
  let isClickInside = box1.contains(event.target) || box2.contains(event.target);
  if (!isClickInside) {
    alert('You clicked outside Box1 and Box2')
  }
});

Check out the live demo here: https://jsfiddle.net/1zj9dmq7/1/

Answer 2

Give this a shot:

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');

document.addEventListener('click', function(event) {
  let isClickInside = box1.contains(event.target) || box2.contains(event.target);
  if (!isClickInside) {
    alert('You clicked outside Box1 and Box2')
  }
});

Check out the live demo here: https://jsfiddle.net/1zj9dmq7/1/

Answer 3

Answer №2

To determine if the id matches any of the two div's ids, simply check the value of event.target.id

var specifiedElement = document.getElementById('a');
document.addEventListener('click', function(event) {
  //var isClickInside = specifiedElement.contains(event.target);
  //console.log(event.target.id);
  if ((event.target.id != 'a') && (event.target.id != 'b')) {
    alert('You clicked outside A and B')
  }
});

div {
  background: #aaa;
  height:2em;
  padding: 1em;
  margin-bottom:10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 4

To determine if the id matches any of the two div's ids, simply check the value of event.target.id

var specifiedElement = document.getElementById('a');
document.addEventListener('click', function(event) {
  //var isClickInside = specifiedElement.contains(event.target);
  //console.log(event.target.id);
  if ((event.target.id != 'a') && (event.target.id != 'b')) {
    alert('You clicked outside A and B')
  }
});

div {
  background: #aaa;
  height:2em;
  padding: 1em;
  margin-bottom:10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 5

Answer №3

Retrieve the element's id using the event object when triggered. Show an alert if it is not 'a' or 'b'

document.addEventListener('click', function(event) {
  if (event.target.id !== 'a' && event.target.id !== 'b') {
    alert('You clicked outside A and B')
  }

});

div {
  background: #aaa;
  height: 2em;
  padding: 1em;
  margin-bottom: 10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 6

Retrieve the element's id using the event object when triggered. Show an alert if it is not 'a' or 'b'

document.addEventListener('click', function(event) {
  if (event.target.id !== 'a' && event.target.id !== 'b') {
    alert('You clicked outside A and B')
  }

});

div {
  background: #aaa;
  height: 2em;
  padding: 1em;
  margin-bottom: 10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 7

Answer №4

You might want to consider using an event similar to focusLost. I believe jQuery has something along those lines, although I'm not certain of the exact name.

Answer 8

You might want to consider using an event similar to focusLost. I believe jQuery has something along those lines, although I'm not certain of the exact name.

Identify when a click occurs outside specific elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

When using the resize property in monaco-editor, it may result in editor popups being obscured or

"Can you explain the process by which React grabs the props using the code `const props = this.props

Leverage the power of Signal R through React with aspnet/signalr integration

Using jQuery's .live('click') method will only bind to the initial element found on the webpage

Execute a setInterval operation, pause it for a duration of 3 seconds, and then resume its execution

Styling emails in an inbox with CSS

Getting the string value from a table row using JavaScript

Necessitating derived classes to implement methods without making them publicly accessible

Optimal practices for localization

Is TypeScript being converted to JavaScript with both files in the same directory?

Navigating through a sequence of URLs in Node.js, one by one

Contrast between pm.response.json() and parsing the responseBody using JSON.parse()

Console Error: Attempting to set the 'className' property of null object results in an

Sending a POST request to a PHP file in React: A Step-by-Step Guide

What's causing this MUI React data grid component to be rendered multiple times?

How can the Request and Response objects be accessed in external Node.js (Express) files?

Is there a way to hide my jQuery menu?

How can I incorporate Bootstrap multi-select into the jQuery DataTables DOM?

Is there a method by which I can access information from a linked document in Firebase?