3

http://jsfiddle.net/aintnobody/0L1yumpe/

与相同的代码

http://www.aintnobodymusic.com/monkey

问题：在小提琴上，一切正常。在所有情况下，上面的图像都会通过指针事件被忽略：无，并且点击会传递到下面的任何内容。我们可以通过底部两个的事件侦听器来判断这一点，并且由于前 4 个是 youtube iframe 嵌入，我们可以判断是因为点击开始了视频（这些是实时视频，顺便说一句，所以请务必点击中心或您可能会被带到 youtube）。

所以，一切都很好......直到我把它放在一个网站上。我在本地和托管环境中都尝试了四次，我总是得到相同的结果：底部的两个表现如预期，点击穿过图像到下面的 div。但是，如果上面的图片覆盖了 100% 的像素，则 iframe (youtube) 不会注册点击。即使只有一个像素被曝光，它也会按应有的方式点击通过。这就是为什么存在“短”集的原因。这些视频上方的图像比下方的视频窄一个像素。

但是，在 Firefox 中，100% 覆盖的视频不会触发。它在我迄今为止测试过的 Chrome 和 Safari 中运行良好，但在 Firefox 中却不行。

我在任何地方都找不到一个提到这个问题的地方。

我已经进行了一次又一次的测试，以缩小这里发生的情况。

这是youtube的问题吗？火狐的问题？iframe 问题？这可能与 iframe 上缺少源标签有关吗？也许我的文档头部与小提琴的配置有些不同？我也在codepen上尝试过类似的方法，它工作得很好（点击通过）......直到我把它放在一个网站上并使用firefox。

编辑添加：刚刚在codepen上做了简化的情况，点击在那里很好，但不是当我主持时：

http://codepen.io/oompaLoompa/pen/QwqRER

<iframe 
    class="video full jpgOverVideoFull"
    width="200" 
    height="150" 
    src="https://www.youtube.com/embed/DEzREJbln-o"
    frameborder="0" 
    allowfullscreen>
</iframe>

<div class="image full jpgOverVideoFull"
     style="background-image:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/247/cache/proboscis-monkey-in-tree_24704_600x450.jpg');"
>jpg full vid</div>

<iframe 
    class="video full pngOverVideoFull"
    width="200" 
    height="150" 
    src="https://www.youtube.com/embed/DEzREJbln-o"
    frameborder="0" 
    allowfullscreen>
</iframe>

<div class="image full pngOverVideoFull"
    style="background-image:url('http://www.whaleoil.co.nz/wp-content/uploads/2012/05/monkey.png');"
>png full vid</div>

和CSS：

.video, .image, {
    height:150px;
    position: absolute;
    font-size:30px;
    color:#F2F;
    text-align: center;
}
.image {
    z-index:1;
    pointer-events: none;
    background-size: cover;
}

.jpgOverVideoFull {
    top:20px;
    left:20px;
}

.pngOverVideoFull {
    top:190px;
    left:20px;
}

.full {
    width:200px;
}

.short {
    width:199px;
}
4

1 回答 1

3

由于没有其他人提供任何意见，我将尽我所能提供给你，希望它可能对其他人有所帮助，或者有人可能会从这里接过来并使用它。以下至少是一个解决方案，虽然我不会称它为解决方案：

如果 iframe 前面完全不透明，则不会触发。一个空白像素就可以了，或者一个不透明的图像。它与图像类型无关。可能是背景颜色。它是完全不透明的，并且覆盖了每个像素，指针事件：没有一个不起作用。

所以，我发现的唯一解决方案是留下一小部分不覆盖（看起来很糟糕），或者制作半透明（额外处理）。由于到目前为止这似乎只是 Firefox 中的一个问题，因此我尝试使用以下 css：

opacity: 1;
-moz-opacity: .9899;

希望它在其他任何地方都呈现为完全不透明，但随后仅在 ff 中呈现半透明。不幸的是，我的版本高于需要前缀的版本，它采用无前缀版本并忽略前缀。

（.9899 是因为它在 0.99 或更高的不透明度下不起作用，尽管我不确定有多少位是实际使用的或实际使用的）

所以，因为我不希望它不是半透明的，所以我能想到的最好的（无需不必要地减慢其他浏览器的速度）是：

@-moz-document url-prefix() {
    #elementId {
        -moz-opacity: .9899;
        opacity: .9899;
    }
}

它有效，但它让我畏缩。这让我想知道还有哪些其他浏览器怪癖可能是我尚未能够测试的，比如旧版 IT、Opera Mini 等。主要是，我不喜欢它，因为它不能回答更大的问题：为什么在带有指针事件的 yt iframe 点击上做一个完全不透明的 div：在每个小提琴、钢笔等中都没有，但随后不在现场点击（托管或本地）

那里还有另一个可能更重要的区别。如果您对这可能是什么有任何线索，请插话。

于 2015-02-09T22:46:36.057 回答