Question

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

与

上的相同代码相比

http://www.aintnobodymusic.com/monkey

问题：在小提琴上，一切都按预期进行。在所有情况下，上面的图像都会被指针事件忽略：无，并且点击会传递到下面的任何内容。我们可以通过事件监听器告诉底部两个，并且由于前4个是youtube iframe嵌入，我们可以告诉因为点击启动视频（这些是实时视频，顺便说一句，所以一定要点击中心或你可能会被带到youtube）。

所以，一切都很好......直到我把它放在一个网站上。我在本地和托管环境中尝试了四次，我总是得到相同的结果：底部的两个表现如预期的那样，点击通过图像到达下面的div。但是，iframe（youtube）不会注册点击，如果100％的像素被上面的图像覆盖。即使暴露出一个像素，它也应该点击。这就是＆＃34;短＆＃34;集就在那里。这些视频上方的图像正好比下面的视频窄一个像素。

然而，在Firefox中，100％覆盖的视频不会触发。它在目前为止我测试的Chrome和Safari中运行良好，但在Firefox中没有。

我无法在任何地方找到这个问题。

我在测试后做了测试，以缩小此处发生的事情。

这是一个youtube问题吗？一个火狐问题？一个iframe问题？它可能与iframe缺少原始标签有关吗？也许我的文档头部与小提琴的配置有些不同？我也尝试过类似的代码，它工作正常（点击传递）...直到我把它放在网站上并使用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;
}

Answer 1

由于没有其他人提供任何意见，我会提供最好的，我能够找到它可能对其他人有帮助，或者有人可能会从这里接收到与它一起运行。以下至少是一个解决方案，虽然我不会称之为解决方案：

如果iframe在前面完全不透明，则不会触发。一个空白像素将执行，或者不太透明的图像。它与图像类型无关。可能是背景颜色。它完全不透明，覆盖每个像素，指针事件：none都不起作用。

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

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

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

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

所以，既然我不想要它是半透明的，如果它不是必须的，那么我能够想象的最好（不会不必要地放慢其他浏览器的速度）：

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

它有效，但它让我感到畏缩。这让我想知道其他浏览器的怪癖可能就在我能够测试的地方，比如旧的IT，Opera Mini等。主要是，我不喜欢它，因为它没有＆＃39 ;回答更大的问题：为什么一个完全不透明的div对yt iframe点击通过指针事件：在每个小提琴，笔等都没有，但在网站上没有点击（托管或本地）

还有另一种可能更重要的区别。如果你对这可能是什么有任何线索，请发信息。

Youtube iframe没有响应通过pointer-events：none传递到上面图片的点击

1 个答案: