Question

我有关闭Youtube iframe周围光线的代码，但它只能在Chrome浏览器中正常工作。在Firefox中，我可以关灯，但我无法再打开它。知道为什么在Firefox中不起作用吗？

<html>
<head>
<style>
.video {
position:relative;
z-index:102;
}
#persoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}
</style>
</head>
<body>

<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/5HLtpoxOeuM" frameborder="0" allowfullscreen></iframe>
<br><br>

<button class="switch">turn off light</button>
(to turn on light - click somewhere)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
var per = 0;
$(document).ready(function(){
  $("#persoff").css("height", $(document).height()).hide();
  $(document).click(function(e) {
    if(($(event.srcElement||e.srcElement).attr('class') != 'switch') && per == 1) {
      $("#persoff").toggle();
      per = 0;
    }
  });
  $(".switch").click(function(){
    $("#persoff").toggle();
    per += 1;
    if (per == 2) {
      per = 0;
    }
  });
});
</script>

<div id='persoff'></div>
</body>
</html>

Answer 1

Firefox不使用全局event模型，您必须将其明确地作为hanlder函数参数传递。

在您的情况下，您已将其作为e传递。因此，在点击处理程序中使用e而不是event。

编辑：事实上，在您的情况下，您无法检查event.srcElement，因为FF事件为undefined。

EDIT2：所以改为使用：if(!$(e.target).hasClass('switch') && per == 1)

作为旁注，我没有得到关于per变量的逻辑，但这完全偏离主题。

关掉iframe周围的灯光

1 个答案:

-jsFiddle-