Question

我有一个div元素，它有一个点击事件当div超过iframe区域（div比用户更接近用户）时，点击事件不会上升！如果div在其他地方（不在iframe之上） - 它会上升。

P.S.1。 iframe是YouTube视频（另一个域名）
P.S.2。当输入[type =“button”]元素而不是div时 - 单击上升！
P.S.3。为什么div，而不是按钮？我需要用div（和另一个元素）实现拖动事件，并且不可能做按钮。

我试过了：

div和iframe之间的透明屏幕叠加 - 什么都没有;
找到拦截点击事件的人 - 没有。

Answer 1

添加wmode，它有两个参数。

&wmode=Opaque

&wmode=transparent

即

<iframe title="YouTube video player" width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
 frameborder="0" wmode="Opaque">

看看HERE

或jquery

$(document).ready(function(){

$('iframe').each(function(){
       var url = $(this).attr("src");
       var char = "?";
       if(url.indexOf("?") != -1){
               var char = "&";
        }

       $(this).attr("src",url+char+"wmode=transparent");
 });

 });

Answer 2

我试过这个并且它有效perfectly：

<iframe width="560" height="315" src="//www.youtube.com/embed/wynQl0fD3o8" frameborder="0" allowfullscreen></iframe>

<div style="position: absolute; top: 10px; background: red; padding: 20px;" onclick="alert('a')">button</div>

当点击事件超过iframe时，它不会上升吗？

2 个答案: