jQuery .click on element with element behind stacking error?

Question

I have a 'lightbox' similar function which simply brings up 2 divs like this:

The green color (wont be colored in once it works) is the area to click to close the login box.

jsFiddle with code: http://jsfiddle.net/bhcGv/8/

When you click on the login box it will disappear as it thinks its clicking on the green box. Any suggestions?

possible duplicate of [Prevent execution of parent event handler](http://stackoverflow.com/questions/1398582/prevent-execution-of-parent-event-handler) — Felix Kling, Aug 20 '12 at 13:41
@loler my bad, updated jsfiddle a few moments ago however that is not preventing the issue — zomboble, Aug 20 '12 at 13:44
@zomboble: The fiddle still does not show anything for me. This one does: http://jsfiddle.net/bhcGv/9/. However, the solution to the problem is in the link in my previous comment. — Felix Kling, Aug 20 '12 at 13:46
@Flater that could be a reason of problem, but there was a second reason which i did not notice at first. `#centeredBox` is inside of div `#loginOffBox` that's why `.stopPropagation` is needed. — loler, Aug 20 '12 at 13:56
@Loler: there isn't any other explanation for an event bubbling up, other than it being placed inside the other element in the DOM. Visual styling will never influence the working of the DOM. CSS != Javascript. — Flater, Aug 20 '12 at 13:59

score 4 · Accepted Answer · answered Aug 20 '12 at 13:46

4

you need .stopPropagation method.

here the updated jsfidle: http://jsfiddle.net/bhcGv/10/

answered Aug 20 '12 at 13:46

Baptiste Pernet

3,318
22
47

score 1 · Answer 2 · edited May 16 '13 at 03:39

1

you could add this code

.find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });

so your document.ready function becomes

$(document).ready(function(){
    $("#loginOffBox").click(function(){
        $('#loginOffBox').hide();
          $('#centeredBox').hide();
    }).find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });
    // other js
});

this should stop the event from being run when you click on the centered div.

You could also take the centered div out of the colored one too. then you wont have the event bubbles.

edited May 16 '13 at 03:39

Mathijs Flietstra

12,900
3
38
67

answered Aug 20 '12 at 13:44

Qpirate

2,078
1
29
41

Either call `e.stopPropegation();` or `return false;` but both is redundant. – Felix Kling Aug 20 '12 at 13:47
I changed the spelling mistake in `e.stopPropegation();` in the post to `e.stopPropagation();` sometime after @FelixKling's answer. – Mathijs Flietstra May 16 '13 at 03:41

score 0 · Answer 3 · answered Aug 20 '12 at 13:46

0

You want to fix the z-index of the two divs. Background div should have a smaller z-index than the popup div and both should have a relatively high value.

Try z-index of 1000 for loginOffBox and 1100 for centeredBox and it should work fine.

answered Aug 20 '12 at 13:46

Rohit

356
1
5

Yep, almost forgot to add, It might not be necessary to have the background div a parent to the centered div. they both can be siblings if they are positioned appropriately in css. Then there is not need for special event capturing. – Rohit Aug 20 '12 at 13:55

jQuery .click on element with element behind stacking error?

3 Answers3