130

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!

hannebaumsaway
  • 2,644
  • 7
  • 27
  • 37

4 Answers4

250

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.

Chris Brown
  • 4,445
  • 3
  • 28
  • 36
  • 2
    Perfect! I had not run across `pointer-events` before, this is exactly what I was looking for. Thank you! – hannebaumsaway Aug 06 '13 at 14:47
  • 1
    @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. – Chris Brown Nov 23 '15 at 20:01
  • @ChrisBrown the cursor changing was a little jostling. Here's a little bit of what I came up with http://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! – Dusty Nov 24 '15 at 15:16
  • @HamendraSunthwal Really? What did you find? MDN doesn't say anything about it not working on mobile devices – tonitone120 Dec 07 '20 at 18:44
20

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!
}
Terry
  • 989
  • 8
  • 29
7

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>
Husam Ebish
  • 4,893
  • 2
  • 22
  • 38
2

This is CSS tutorial(the easiest):

#button{
  pointer-events: none;
}
<button id="button">Unclickable!</button> <!-- The element -->
محمد حسین کثیرلو
  • 21
  • 1