javascript - 关闭 iframe 周围的灯

标签 javascript jquery html firefox

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

代码(或 https://jsfiddle.net/uhL35f15/ ):

<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>

最佳答案

Firefox 不使用全局事件模型,您必须明确地将其作为处理函数参数传递。

就您而言,您已经将其作为 e 传递。因此,在点击处理程序中使用 e 而不是 event

编辑:事实上,在您的情况下,您无法检查 event.srcElement 因为 FF 事件是未定义

编辑2:所以改用:if(!$(e.target).hasClass('switch') && per == 1)

顺便说一句,我不明白你关于 per 变量的逻辑,但这完全偏离了主题。

-jsFiddle-

关于javascript - 关闭 iframe 周围的灯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33330178/

相关文章:

javascript - 使用ajax和php根据文本框更改更改查询

javascript - 使用 yargs 和 gulp-if 分离/组合 gulp 任务源

javascript - 如何使用纯 javascript 获得 10 毫秒的旧鼠标位置?

javascript - 使用 .trigger 自动加载 fancybox ('click' )

javascript - 单击时,如果有类则发出警报,否则添加类问题

javascript - 将滚动条添加到 div 而不是滚动整个页面

html - 无法使用 Bootstrap 解决方案使不使用导航栏类的菜单居中

jquery - 如何使用 JQuery 隐藏和显示 HTML 元素?

javascript - 通过使用 jquery 检查单选按钮启用复选框

html - 如何将 wordpress 主题菜单搜索 .svg 图标更改为自定义 png