How do I show a div, but make it completely un-interactive, in Chrome

Question

I have a <div> overlayed onto my page, and that tracks the mouse. However, on occasion the user is able to move the mouse at the appropriate speed to enter the tracking <div>. Also, this <div> will sometimes prevent the user from clicking something else, that is below/behind.

What is the correct way to visually show this <div>, without it 'blocking' or interfering with the underlying DOM, or any of them for that matter? In particular, to stop it interfering with mouse events.

If I understand what you want to do correctly, read this: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements — Sean Johnson, Oct 17 '13 at 10:22

score 4 · Accepted Answer · answered Oct 17 '13 at 10:32

4

Good answers to this already, one you can consider also is the css:

pointer-events: none;

Which effectively makes events act on the items below the div, not the div itself.

Support for this on IE isn't great, but it's a nice way if you either don't need IE support, or if you have the time to do it properly and include a conditional fallback.

Check out this for support info: http://caniuse.com/pointer-events

answered Oct 17 '13 at 10:32

Owen C. Jones

1,435
1
11
13

1

This achieved precisely what I needed. – jtromans Oct 17 '13 at 10:39
interesting one +1 :-) – GibboK Oct 17 '13 at 12:13

score 3 · Answer 2 · answered Oct 17 '13 at 10:19

3

you can place above it (with higher z-index) an absolute positioned div element, with an opacity value of 0

OR

you can use jQuery:

$(function(){
    $('#divId').click(function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
    });
});

i personally prefer the opacity approach. but that's me.

hope that helped

answered Oct 17 '13 at 10:19

geevee

5,411
5
30
48

I need the DIV to be displayed. Are you suggesting I set it's opacity to 0? If so, surely this will visually hide hide the DIV? – jtromans Oct 17 '13 at 10:37
no, i suggested placing ABOVE it a div with opacity of 0. so the invisible div will absorb the clicks – geevee Oct 17 '13 at 10:39

GibboK · Answer 3 · 2013-10-17T12:12:16.083

0

Yuo can try to capture the event and prevent its default behavior using

event.preventDefault();

here a pseudo code, it works without jquery

var el = document.getElementById("yourdiv");
el.addEventListener("click", action, false);

function action() {
    event.preventDefault();
return false;
}

edited Oct 17 '13 at 12:12

answered Oct 17 '13 at 10:21

GibboK

71,848
143
435
658

How do I show a div, but make it completely un-interactive, in Chrome

3 Answers3