如何使用CSS使区域不可点击？

Question

假设我有一个包含一些链接和图片的包装 div，有没有仅使用 CSS 就能一次性禁用它的方法？

---

经过回答的审查：
我放弃了仅使用 CSS 实现的想法。 jQuery blockUI 插件效果很好。

- jmoon

Answer 1

有一个CSS规则可以实现这个功能：

```css pointer-events: none; ```

检查浏览器支持情况：https://caniuse.com/pointer-events

- Dmitri

---

IE的唯一目的是破坏互联网的可用性。 - Null Head

很好，在Firefox、Safari和Chrome中工作，但在IE和Opera中不行。但是谁在乎呢。+1 给 @NullHead。 - KAsh

@NullHead，这是我多年来听到的最好的说法！ - yaakov

现在所有现代浏览器（IE11+）都支持这个功能。 - Reggie Pinkham

我希望他们能在新闻中报道微软已经停止支持IE，这样用户就会停止使用它。 - Vandolph Reyes

Answer 2

现在你可以将伪元素放置在内容上方。

.blocked
{
    position:relative;
}
.blocked:after
{
    content: '';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
    background: transparent;
}

http://jsfiddle.net/HE5wR/27/

- towr

---

因为使用.blocked a:after伪元素，您可以将其放置在div上，使其成为链接本身的一部分，从而使整个div区域可点击，而不是阻止它。 - towr

这不是预期的结果。整个div不可点击，只有链接可以点击，尽管使用了CSS。请参见http://jsfiddle.net/HE5wR/26/。顺便说一下，您的JavaScript中有一个错误，使用了`isn't`，导致字符串过早结束并出现控制台错误。我认为您是在说伪元素也是“热点”，因此它作为链接起作用，尽管它位于原始链接的上方。 - Chloe

是的，伪元素会很热门，因为它是链接元素的一部分。（我已经修复了jsfiddle，谢谢。） - towr

非常棒的解决方案。谢谢！ - jondow

Answer 3

我认为这个也可以用：

CSS

pointer-events: none;

- Adrian Tocu

Answer 4

如果您要使用jQuery，可以轻松地使用blockUI插件完成此操作。 ...或者用CSS回答你的问题，你将不得不绝对定位div在你希望阻止的内容上面。只需确保绝对定位的div在被阻止的内容之后进行z-indexing。

<div style="position:relative;width: 200px;height: 200px;background-color:green">
    <div>
        <a href="#">Content to be blocked.</a>
    </div>
    <div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>

很抱歉所有的内联CSS。你需要创建一些好看的类。此外，这只在Firefox和IE7中进行了测试。

- erikphipps

Answer 5

用另一个不可点击的元素来覆盖它。你可能需要使用JavaScript来切换这个“遮盖层”的开关。你也可以做一些聪明的事情，比如让它半透明之类的。

<style>
    #cover {position:absolute;background-color:#000;opacity:0.4;}
</style>

<div id="clickable-stuff">
   ...
</div>
<div id="cover">
</div>

<script type="text/javascript">
    function coverUp() {
        var cover = document.getElementById('cover');
        var areaToCover = document.getElementById('clickable-stuff');
        cover.style.display = 'block';
        cover.style.width = //get areaToCover's width
        cover.style.height = //get areaToCover's height
        cover.style.left = //get areaToCover's absolute left position
        cover.style.top = //get areaToCover's absolute top position
    }

    /*
       Check out jQuery or another library which makes
       it quick and easy to get things like absolute position
       of an element
    */
</script>

- Rex M

Answer 6

你应该考虑使用jQuery的event.preventDefault函数。 这里可以找到一个例子：

http://api.jquery.com/event.preventDefault/

简短版：

$("#element-to-block").click( function(event) {
  event.preventDefault();
}

砰！

- Simone Poggi

Answer 7

如果您的意思是使用户无法复制、粘贴或以某种方式保存数据，那么不，这从来都不可能。

您可以使用jQuery BlockUI插件或CSS规则pointer-events: none;，但这并不能真正防止人们复制您的文本或图像。

最坏的情况下，我总是可以使用wget下载您的内容，而最好的情况下，无论是CSS还是JS方法都很容易被插件绕过，比如：

• 在火狐浏览器或谷歌浏览器上允许右键点击
• 在火狐浏览器或谷歌浏览器上绝对启用右键点击和复制
• 在火狐浏览器或谷歌浏览器上不要干扰粘贴

进一步说，除非你有一个真正好的、合法的理由来打破基本浏览器行为、可用性、可访问性、翻译功能、密码管理器、截图工具、容器工具或任何数量的用户右键上下文菜单中各种浏览器插件功能，请停止这样做。

- lsl