Javascript 点击一个元素，影响什么'；它的背后是什么

所以，我打算为我的网站制作一个覆盖物，其中一个元素固定在网站上，并置于一切之上。但这意味着该元素背后的任何其他内容都不会受到影响

这是一个重现这个问题的例子

您会注意到无法突出显示黑色文本，并且JavaScript事件不会触发

---

以下是我用来创建此问题的CSS+HTML：

HTML

<div id="main-container">
    <div id="container-content">You can't highlight me! D:</div>
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
</div>

#main-container {
    width: 90%;
    margin: 5%;
    position: relative;
    height: 500px;
    overflow: auto;
}

#container-content {
    width: 100%;
    height: auto;
}

#container-fixed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

---

---

我想达到的目标可能实现吗？CSS和JavaScript（jQuery）答案都是允许的。

这应该可以做到：

#container-fixed{
    pointer-events: none;
}

在目标元素上禁用鼠标交互。
请记住，11之前的IE版本不支持此CSS属性。

使用CSS：

除了指示该元素不是鼠标事件的目标之外，值none还指示鼠标事件“穿过”该元素，并以该元素“下面”的任何内容为目标

#容器内容{
宽度：100%；
高度：自动；
指针事件：无；
}

---

如果您需要对IE 10及更低版本的支持，有一个。

您可以通过添加

z-index

#container-content {
 width:100%;
 height:auto;
  z-index:999;
  position:absolute;
}

---

您可以使用css的指针事件来实现这一点。 将容器内容的css更改为

#container-content{
width:100%;
height:auto;
}

#container-fixed {
width:100%;
height:100%;
position:absolute;
top:0; left:0;
color:red;

    pointer-events: none /*the important thing*/
}

工作小提琴

可以找到指向指针事件更多信息的链接

---

这可能不是跨浏览器的，所以另一个家伙建议（如果这是一个问题）使用javascript，通过层转发鼠标事件。完整的答案可以找到

对于IE10>浏览器，您必须通过更高级别的元素计算要单击的元素的位置，然后执行您想要执行的操作。e、 g

topo=$（“#容器内容”）.offset（）.top；
左=$（“#容器内容”）.offset（）.left；
右=$（“#容器内容”）.offset（）.左+$（“#容器内容”）.width（）；
底部=$（“#容器内容”）.offset（）.顶部+$（“#容器内容”）.height（）；
$（文档）。单击（函数（e）{
如果（e.pageX>=left&&e.pageX=topo&&e.pagey你到底想实现什么？实际上，我可以选择JSFIDDL（在Chrome36上）中的红色和黑色文本我在Linux上使用Chromium 34。你可以选择，但不能选择单个位。如果你三次单击它，它会选择所有文本。否则我无法选择文本。还要记住，我也需要启动JavaScript事件。啊，为什么IE，为什么？D：谢谢你的回答。正如我们所有的web开发人员都知道的，IE在很多方面对游戏有点慢。在好的一面是，相当多的尖端功能是。仅仅设置
z-index
不允许点击它。在小提琴上试过，它在小提琴上工作，但正如问题
#container fixed
中所述，它意味着是一个覆盖。在
#container content
上设置
z-index
可以放置它上面的
#容器已修复
，因此它不再是覆盖层。
topo=$('#container-content').offset().top;
left=$('#container-content').offset().left;
right=$('#container-content').offset().left+$('#container-content').width();
bottom=$('#container-content').offset().top+$('#container-content').height();
$(document).click(function(e){
    if(e.pageX>=left && e.pageX<=right && e.pageY>=topo && e.pageY<=bottom){
        alert("This doesn't work.");
    }
});