Question

我正在尝试在有人点击youtube缩略图时显示弹出窗口。这在Chrome中运行良好，但点击事件不会在Firefox中触发。

我设法将问题减少到下面的问题（Fiddle here）

<div class="Youtube">
    <img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
    <img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>

附件发生得很好但是在Firefox中没有调用处理程序

$(".Youtube").click(function () {
    alert('clicked');
    return false;
});

我怀疑它与div或图像的定位/布局有关

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
}

div.Youtube img.Thumb {
    position:relative;
    z-index:-1;
}

.Youtube img.PlayButton {
    height: auto;
    width: 160px;
    position:relative;
    left:20px;
    top:-160px;
    z-index:-1;
    opacity: .7;
}

有人可以指出我的错误吗？（我刚刚注意到div捕获点击的 border 是合适的，只是没有任何内容）

Answer 1

尝试：This updated jsFiddle - 删除了多余的z-index属性。

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
 }

div.Youtube img.Thumb {
    position:relative;
}

.Youtube img.PlayButton {
    height: auto;
    width: 160px;
    position:relative;
    left:20px;
    top:-160px;
    opacity: .7;
}

Answer 2

在.Youtube类上设置正z-index也可以在FF上正常工作。

代码：

.Youtube
{
    margin: 5px;
    width: 320px;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border: solid 5px #f00;
    position: relative;
    z-index: 1;
}

我正在网上寻找原因......

演示：http://jsfiddle.net/IrvinDominin/6Zkua/

修改

我认为原因是我们在同一堆栈上下文relative中定义了所有元素，但是如果未设置z-index，则此上下文中的firefox假定为undefined，因此元素将总是在较低的指数。

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 3

向Div明确添加z-index使其可以在firefox上运行

z-index:0

http://jsfiddle.net/LsqAq/3/

单击事件不会在Firefox中包含重叠图像的div上触发

3 个答案:

修改