firefox - Click 事件不会在 Firefox 中包含重叠图像的 div 上触发

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 捕获点击的边框是合适的，只是没有任何内容)

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;
}