jquery 如何使用CSS使一个区域不可点击?

ds97pgxw  于 2023-10-17  发布在  jQuery
关注(0)|答案(7)|浏览(131)

让我们说,如果我有 Package 器div,其中包括一些链接和图像,有没有办法我可以停用它一次与CSS只?
审查答案后:
我放弃了只使用CSS的想法。jQuery blockUI plug in works like charm.

4zcjmb1e

4zcjmb1e1#

有一个CSS规则:
pointer-events: none;
查看浏览器支持:https://caniuse.com/pointer-events

5fjcxozz

5fjcxozz2#

现在你可以在内容上放置一个伪元素。

.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/

4smxwvx5

4smxwvx53#

我觉得这个也可以:

CSS

pointer-events: none;
exdqitrt

exdqitrt4#

如果你打算使用jQuery,你可以很容易地用blockUI插件来完成。.或者用CSS来回答你的问题,你必须把div绝对定位在你想阻止的内容上。只要确保绝对定位的div位于要阻止的内容之后,以用于z索引。

<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上测试过。

iszxjhcz

iszxjhcz5#

用另一个不可点击的元素覆盖它。您可能需要使用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>
koaltpgm

koaltpgm6#

你应该考虑应用jQuery的event.preventDefault函数。在这里你可以找到一个例子:
http://api.jquery.com/event.preventDefault/
TL; DR版本:

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

砰!

q3aa0525

q3aa05257#

如果你的意思是不可点击,使用户无法复制和粘贴它或保存的数据以某种方式。不,这从来就不可能。
你可以使用jQuery BlockUI plugin或CSS规则pointer-events: none;,但这并不能真正阻止人们复制你的文本或图像。
在最坏的情况下,我总是可以wget你的内容,在最好的情况下,css和js方法都很容易使用插件规避,比如:

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

相关问题