Div 点击事件在 iframe 上时不会上升

Div click event doesn't rise when it is over iframe?

本文关键字：iframe 事件 Div      更新时间：2023-09-26

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

附言1.Iframe是YouTube视频(另一个域(
附言2.当它是输入[类型="按钮"]元素而不是div时 - 点击上升！
附言3.为什么是div，而不是按钮？我需要使用div(和另一个元素(实现拖动事件，并且不可能做 whis 按钮。

我试过了：

  • div 和 iframe 之间的透明屏幕覆盖 - 什么都没有;
  • 查找谁拦截点击事件 - 什么都没有。

添加 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">

看看这里

或 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");
 });
 });

我试过这个，它工作得很好：

<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>
相关文章：