Make element unclickable (click things behind it)

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!

136316 次浏览

小开

最佳答案

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

下面是 pointer-events可以接受的值的完整列表。

小开

CSS 指针事件是您想要查看的内容。在您的示例中，将指针事件设置为“ none”。看看这个 JSFiddle 的例子... < a href = “ http://JSFiddle.net/dppjw/1/”> http://JSFiddle.net/dppjw/1/

注意，双击图标仍然会显示您单击了该段落。

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

小开

如果你想使用 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>

小开

This is CSS tutorial(the easiest):

#button{
pointer-events: none;
}

<button id="button">Unclickable!</button> <!-- The element -->