当z-index为负值时,onclick无法在webkit或mozilla中运行

How*_*ard 6 javascript css z-index onclick

我有以下div设置,只适用于IE9.在Moz和Webkit上,onclick不会触发.如果我将z-index变为0,则onclick可以工作,但我对网站中的其他元素有可见性问题.有没有办法通过负z-指数获得onclick?

<div id="adbg" style="margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor: pointer; z-index: -1;">
<div OnClick="window.open('/bgClicks/2');" style="background: #fff url('http://www.example.com/img/bg/w_1.jpg') no-repeat center top fixed; height: 100%; width: 100%; margin: 0pt auto; cursor: pointer;"></div>
</div>
<div id="wrapper">
Run Code Online (Sandbox Code Playgroud)

Ale*_*ore 3

这里的 z-index-肯定是个问题。Moz/Webkit 中发生的情况是预期的结果,您必须在拾取点击的对象上放置不可见/透明的图层,从而不让它进入实际的链接。

有几件事你可以做..
1)找到覆盖它的对象(在Chrome中很简单,只需右键单击-检查元素,通常鼠标下的直接元素会在检查器中自动突出显示。然后对于这个元素,给出一个 css 规则:

pointer-events: none;
Run Code Online (Sandbox Code Playgroud)

这允许点击通过它注册到下面的对象。请注意,浏览器对此的支持不是很好,所以我建议另一个解决方案:

2)重构你的代码,这样你就不会遇到这个问题,在逻辑世界中为什么你会在链接的顶部有任何东西,这实际上是由于结构不良,重新考虑你的边距/填充,或者使jsfiddle 这样我们就可以看得更清楚了:)。