admin管理员组文章数量:1332345
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.
Share Improve this question asked Jun 5, 2012 at 11:02 gopi1410gopi1410 6,62510 gold badges43 silver badges76 bronze badges1 Answer
Reset to default 6You 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
版权声明:本文标题:javascript - jquery check if a div is clicked or not - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742247566a2440139.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论