javascript - jquery check if a div is clicked or not - Stack Overflow

admin管理员组

文章数量:1336656

I have the following html code:

<div id="gridStage">
   <div id="point1" class="point rounded-corners">
   </div>
</div>

#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 want to detect if a user has clicked a correct point or not for which I place a div on the correct point on top of the overlay grid, now I have to detect whether his click is on correct point or noyt. So if you have a better layout for this except the above which I am using, you are free to suggest so.

I have the following html code:

<div id="gridStage">
   <div id="point1" class="point rounded-corners">
   </div>
</div>

#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 want to detect if a user has clicked a correct point or not for which I place a div on the correct point on top of the overlay grid, now I have to detect whether his click is on correct point or noyt. So if you have a better layout for this except the above which I am using, you are free to suggest so.

• javascript
• jquery
• click

Share Improve this question Follow asked Jun 5, 2012 at 11:02 gopi1410gopi1410 6,6251010 gold badges4343 silver badges7676 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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();)

本文标签： javascriptjquery check if a div is clicked or notStack Overflow