Trigger alert when clicking outside of a specific div element

Question

Trigger alert when clicking outside of a specific div element

I am trying to implement a feature where an alert pops up if the mouse is clicked outside of the ".square" div element. I have searched extensively for similar mouse events on various websites, but haven't found anything relevant yet. Any help would be greatly appreciated. Thank you.

function myFunction() {
  alert('hi')
}

.square{
width: 100px;
height: 100px;
background-color: red;
}

<div class="square" onclick="myFunction()" ></div>

javascript html css

Answer 1

Answer №1

Easy fix: Just attach a listener to the window triggering an alert, and another listener on the div that prevents the click event from bubbling up, ensuring it doesn't reach the window.

Note: Using stopPropagation can be a bit intrusive, but for experimental purposes, it should suffice.

window.onclick = () => alert('hi')

.square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div onclick="event.stopPropagation()" class="square">TEST</div>

Here's a better solution explaining a more appropriate method for achieving this goal.

Now, adapting that solution to your scenario in a more correct manner, where we analyze the click event to decide whether to trigger the alert:

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi");
  }
};

const squareEl = document.getElementById("square");
document.addEventListener("click", outsideClickListener(squareEl));

#square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div id="square">TEST</div>

Why avoid using stopPropagation? In a small project, using it is generally okay (which is why I recommend it). However, in larger real-world projects, it's discouraged as it could disrupt other functionalities. Consider the example below. Developer A added Test 1 expecting alert('hi 1') to execute whenever the user clicks outside of Test 1. But then developer B introduced Test 2 with stopPropagation that halts all events, causing alert('hi 1') not to run when clicking on Test 2 (outside of

Test 1</code), resulting in a bug.</p>

<p><div>
<div>
<pre class="lang-js"><code>window.onclick = () => alert('hi 2')

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi 1");
  }
};

const squareEl = document.getElementsByClassName("square")[0];
document.addEventListener("click", outsideClickListener(squareEl));

.square, .circle {
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

.square {
  background-color: teal;
}

.circle {
  background-color: wheat;
}

<div class="square">TEST 1</div>
<div onclick="event.stopPropagation()" class="circle">TEST 2</div>

Answer 2

Easy fix: Just attach a listener to the window triggering an alert, and another listener on the div that prevents the click event from bubbling up, ensuring it doesn't reach the window.

Note: Using stopPropagation can be a bit intrusive, but for experimental purposes, it should suffice.

window.onclick = () => alert('hi')

.square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div onclick="event.stopPropagation()" class="square">TEST</div>

Here's a better solution explaining a more appropriate method for achieving this goal.

Now, adapting that solution to your scenario in a more correct manner, where we analyze the click event to decide whether to trigger the alert:

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi");
  }
};

const squareEl = document.getElementById("square");
document.addEventListener("click", outsideClickListener(squareEl));

#square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div id="square">TEST</div>

Why avoid using stopPropagation? In a small project, using it is generally okay (which is why I recommend it). However, in larger real-world projects, it's discouraged as it could disrupt other functionalities. Consider the example below. Developer A added Test 1 expecting alert('hi 1') to execute whenever the user clicks outside of Test 1. But then developer B introduced Test 2 with stopPropagation that halts all events, causing alert('hi 1') not to run when clicking on Test 2 (outside of

Test 1</code), resulting in a bug.</p>

<p><div>
<div>
<pre class="lang-js"><code>window.onclick = () => alert('hi 2')

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi 1");
  }
};

const squareEl = document.getElementsByClassName("square")[0];
document.addEventListener("click", outsideClickListener(squareEl));

.square, .circle {
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

.square {
  background-color: teal;
}

.circle {
  background-color: wheat;
}

<div class="square">TEST 1</div>
<div onclick="event.stopPropagation()" class="circle">TEST 2</div>

Answer 3

Answer №2

<div class="rectangle">Rectangular</div>
.rectangle{
  width:150px;
  height:200px;
  border:2px solid blue;
}



let rect = document.querySelector('.rectangle');
window.addEventListener('click', function(event){  
    if (rect.contains(event.target)){
       alert('You clicked inside the rectangle!')
    } else{
       alert('You clicked outside the rectangle!')
      }
 });

Answer 4

<div class="rectangle">Rectangular</div>
.rectangle{
  width:150px;
  height:200px;
  border:2px solid blue;
}



let rect = document.querySelector('.rectangle');
window.addEventListener('click', function(event){  
    if (rect.contains(event.target)){
       alert('You clicked inside the rectangle!')
    } else{
       alert('You clicked outside the rectangle!')
      }
 });

Answer 5

Answer №3

Create a click event listener for the body element.

Upon clicking the body, verify if the clicked target is the square or a descendant of the square.

function myFunction() {
  alert('hi');
}
$(document).ready(function(){
$('body').on('click', function(e) {
  if($(e.target).is('.square') || $(e.target).closest('.square').length) {
    myFunction();

  }
});
});

.square{
width: 100px;
height: 100px;
color: red;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="square">
</div>
<body>

Answer 6

Create a click event listener for the body element.

Upon clicking the body, verify if the clicked target is the square or a descendant of the square.

function myFunction() {
  alert('hi');
}
$(document).ready(function(){
$('body').on('click', function(e) {
  if($(e.target).is('.square') || $(e.target).closest('.square').length) {
    myFunction();

  }
});
});

.square{
width: 100px;
height: 100px;
color: red;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="square">
</div>
<body>

Trigger alert when clicking outside of a specific div element

Answer №1

Answer №2

Answer №3

Similar questions

Within my table, there are multiple columns, the last two of which have the "is-sticky" class. My goal is to add unique styles specifically to the first sticky column

I am encountering difficulty loading a .gltf file for use with Three.js on my React website

"Yakov's slender typefaces are appearing incorrectly on the screen

What is the best way to standardize data using normalizr?

Tips for changing a div's visibility with radio buttons in jQuery

Can you set up an automatic redirect after a payment is made on paypal.me?

Encountering an error where "null is not an object" while trying to access 'u.default.setString' in React-Native Clipboard

ReactJs - The pagination feature in MaterialTable is malfunctioning, it is not displaying the correct

Which is more accessible: a disabled textbox or a div with role="textbox"?

Video from YouTube keeps playing in the background even after closing Bootstrap modal

The Autocomplete feature in Material UI React includes both a "Select All" and a "Select

Tips for beginning the process of creating a website's user interface

Issues with unresponsive links (HTML5/CSS)

Unusual case of missing lines while reading a file using readline.createInterface()

Automatically print multiple HTML files with a printer or a Network Printer

Learn how to navigate to another page after successful AJAX request handling

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Display the name provided in a registration form on the confirmation page as a token of appreciation

Automatically assign a name as an alt attribute

Tips on designing checkboxes with CSS