如何为firefox编写event.target语句？

Question

我正在处理一个代码，当用户点击外部区域时关闭iframe。它适用于chrome但不适用于firefox。我仍然在努力用html和JS编写代码。

HTML：

<div id="video-iframe-div" class="v-iframe-div-off" onclick="closesubpage();">
    <iframe src="" id="video-iframe" class="v-iframe-off" name="i-video">
    </iframe>
</div>

JS：

function closesubpage() {
    var elementDiv = document.getElementById('video-iframe-div');
    var elementIframe = document.getElementById('video-iframe');
	  if (event.target != elementIframe) {
		   $('#video-iframe-div').prop('className','v-iframe-div-off');
		   $('#video-iframe').prop('className','v-iframe-off');
	  }
}

Answer 1

因为firefox没有event对象飞来飞去。在Chrome中，它确实具有您的代码在Chrome上运行的原因。

要使其适用于所有浏览器，请始终在回调方法的第1个位置传递显式参数，如下所示

function closesubpage(evt, arg1, arg2,...) {
  // 'evt' is the event object and contains the target property.
  // You can name it whatever you want, even 'event'
}

Answer 2

我发现firefox无法识别“event.target”这一事实

你在哪里遇到过这个？当然可以，你只需要将它作为函数参数传递。 https://developer.mozilla.org/en-US/docs/Web/API/Event/target

你正在使用jQuery，所以不要在元素上使用onclick，你也可以用jQuery附加一个click处理程序并保持你的代码更清晰：

$('#video-iframe-div').click(closesubpage);

然后你可以改善你的函数调用：

function closesubpage(event) {
    var elementIframe = $('#video-iframe');

    // If the target matches iframe, halt execution
    if (event.target === elementIframe) return;

    this.prop('className','v-iframe-div-off');
    elementIframe.prop('className','v-iframe-off');
}

Answer 3

通过函数尝试Inline事件：

function closesubpage(event) {
console.log(event);
    // var elementDiv = document.getElementById('video-iframe-div');
    var elementIframe = document.getElementById('video-iframe');
	  if (event.target != elementIframe) {
		   $('#video-iframe-div').prop('className','v-iframe-div-off');
		   $('#video-iframe').prop('className','v-iframe-off');
	  }
}

#video-iframe-div{cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-iframe-div" class="v-iframe-div-off" onclick="closesubpage(event)">
    <iframe src="" id="video-iframe" class="v-iframe-off" name="i-video">
    </iframe>
</div>