Make element unclickable (click things behind it)

Question

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren't there "blocking" the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Solution 1

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

Solution 2

CSS Pointer Events is what you want to look at. In your case, set pointer-events to "none". Look at this JSFiddle for an example... http://jsfiddle.net/dppJw/1/

Notice that double clicking on the icon will still say you click the paragraph.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

Solution 3

If you want to use JavaScript :

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

Comments

[hannebaumsaway]

Perfect! I had not run across pointer-events before, this is exactly what I was looking for. Thank you!

[Chris Brown]

@Dusty Kinda makes sense, you're disabling mouse interactions yet wanting mouse interactions. What is your specific use case? From a UX perspective that seems counter intuitive since the pointer implies the element is clickable. If you throw together a JSFiddle I can have a look.

[Dusty]

@ChrisBrown the cursor changing was a little jostling. Here's a little bit of what I came up with jsfiddle.net/cxwvdos0 Kind of crazy just to disable a button for one second and not have the cursor change. jQuery unbind and bind I think would have worked if I wanted to convert my anonymous functions. Thanks for the response though!

[Andrew]

Single clicking*, and the code example (clicking the icon) doesn't work for me in FF 68.0.

[tonitone120]

@HamendraSunthwal Really? What did you find? MDN doesn't say anything about it not working on mobile devices