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

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

Changing a string into a JavaScript date object

Create reactivity in output by utilizing global functions in Vue

A guide to saving an ArrayBuffer as a file using JavaScript

Can loading HTML and js through ajax be considered secure?

How can I extract an object from an array by using a string key in either Observable or lodash?

Choose Your Price - Price Grids

Effective methods for synchronizing two dropdown menus with varied displays using React

Running asynchronous calls in node.js using express

What are the different ways to customize the indicator color of React Material UI Tabs using hex

javascript monitoring numerous socket channels for echoes

Easily transfer files from your browser application to your Windows applications such as Outlook or printer queues using a simple drag and

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

What is the process of inserting information into a nuxt-link in nuxt.js?

It can be challenging to manage numerous if-else conditions in JQuery

Is there a way to execute a Node 6 npm package within a Node 5.6.0 environment?

Pictures change positions in online email interfaces like gmail

multiple event listeners combined into a single function

My navigation bar is giving me a bit of trouble, as there are two separate issues that seem to be interconnected

Verify if the form has been refreshed in React JS