Home/ Questions/Q 6648483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:39:37+00:00

Let’s say we have box. In this box is another box (box2). I want

  • 0

Let’s say we have box. In this box is another box (box2). I want to activate an event when mouse is clicked in box, but I do not want to activate it if it’s clicked on box2. How can I achieve this? I just want to bind the event to box but exclude box2. I made a test case:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.6.3.min.js"></script>
<style>
.box {width: 300px;height:150px;border:1px solid black;}
.box2 {width: 10px;height:8px;border:1px solid red;z-index:2;}
</style>
<script>
$(function() {
    $('.box').click(function() {
        alert('clicked');
    });
});
</script>
</head>
<body>
<div class="box"><div class="box2"></div></div>
</body>
</html>

In this test case I want to alert when mouse is clicked outside of box2. Unfortunately, it activates no matter what is under cursor, all it cares is if it’s in box. So, how can I activate it if it’s clicked in box, but not activate it if it’s clicked on box2 (red box)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this:

    $('.box2').click(function(e) {
        e.stopPropagation();
    });
    • 0