jquery check if a div is clicked or not

Question

I have the following html code: ```

``` #gridStage is a larger div inside which a smaller div #point is contained. I want to call a correct function if a user clicks on `#point` and another wrong function if the user clicks anywhere on `#gridStage` but not on `#point`. The problem is that when the user clicks on `#point`, jQuery also detects click on `#gridStage` as a result of which both the functions are called, which is not required. Currently I am able to do it with the following code: ``` var pointClick=0; $(".point").click(function() { var pointClick=1; correct(); setTimeout(function() { pointClick=0; },1000); }); $("#gridStage").click(function() { setTimeout(function() { if(pointClick===0) { wrong(); } }, 500); }); ``` But I know this is an inefficient way, so is there any other good solution possible?? Note: All I want to do is that I have a grid as an image, then I overlay a div over it & I wan…

Accepted Answer

You need to stop the propagation.

```
$(".point").click(function(e) {
    correct();
    e.stopPropagation();
});
$("#gridStage").click(function() {
    wrong();
});
```

(note the `e` parameter on the line `$(".point").click(function(e) {` and the `e.stopPropagation();`)

jquery check if a div is clicked or not

Solution

Problem