jquery absolute positioned element click

Question

I have a problem with absolute positioned div's click. I am developing a website with jquery scrollpath and added extra layers to get parallax effect and top layer covers buttons in main layer and they cant be clicked, hovered, ect.

Here is simple examlple:

<div class="body">
<div class="a"></div>
<div class="b">
    <div class="element first">First</div>
    <div class="element second">Second</div>
</div>
</div>

.body {
    position relative;
}
.a {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 600px;
    background: rgba(0,0,0,0.5);
    z-index: 2;
}
.b {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 260px;
    height: 300px;
    background: blue;
    z-index: 1;
}
.b .element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: red;
}
.b .element.first {
    top: 50px;
    left: 50px;
}
.b .element.second {
    bottom: 50px;
    right: 50px;
}
}

I need to keep this html structure and ability to click div's in absolute positioned div with lower z-index. Is it possible?

sanchez · Accepted Answer · 2017-05-09T15:17:45.047

8

You can set pointer-events to none on the upper element to stop it reacting on mouse events.

pointer-events:none;

JSFIDDLE http://jsfiddle.net/ugGgN/5/

Cross browser support is very good these days: http://caniuse.com/#feat=pointer-events

For more information on pointer-events please see the documentation: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

edited May 09 '17 at 15:17

answered Jun 02 '13 at 16:10

sanchez

4,519
3
23
53

Prasenjit Kumar Nag · Answer 2 · 2013-06-02T16:25:09.270

3

If you dont need to track click events in the upper layer then you can achieve this using

pointer-events: none

on the upper layer.

Working Fiddle: http://jsfiddle.net/joycse06/ugGgN/6/

Or you can also make it work by forwarding click events through layers as pointer-events: none is not properly supported cross browser. Have a look at this link http://www.vinylfox.com/forwarding-mouse-events-through-layers/

edited Jun 02 '13 at 16:25

answered Jun 02 '13 at 16:10

Prasenjit Kumar Nag

13,391
3
45
57

score 1 · Answer 3 · edited May 23 '17 at 12:26

The css way is good one, but as they said is no corss browser. Anyway, you can find answer here, on stackoverflow. You have two ways and if i were you i would use the js method .

Edit : according to what you have i followed the js example and i got this.

$('.a').on( 'click', function( event ){
    var clickPos = [event.pageX, event.pageY];
    $('.element').each(function(){
        var t = $(this),
            elemPos = [t.offset().left, t.offset().top],
            elemSize = [t.width(), t.height()];

        if (
            clickPos[0] > elemPos[0] && clickPos[0] < elemPos[0] + elemSize[0]
            && clickPos[1] > elemPos[1] && clickPos[1] < elemPos[1] + elemSize[1]
        ) t.trigger( 'click' );
    });
});

score 1 · Answer 4 · answered Sep 30 '15 at 05:31

1

The cross-browser way to solve this is to use z-index to position it on the layer above the parent.

answered Sep 30 '15 at 05:31

Zach B

534
7
25

score 0 · Answer 5 · answered Jun 02 '13 at 16:10

0

You could add "pointer-events:none;" to the containing div of the absolutely positioned element. That way you will click trough the element.

answered Jun 02 '13 at 16:10

jvakuiler

528
1
6
17

jquery absolute positioned element click

5 Answers5