Question

已经有三天时间试图解决此脚本的问题，现在我看到该脚本不想在电话中使用。这些脚本必须关闭iframe，然后单击模式或图标.close。它可以完美地在PC上运行，但不能在iPhone上运行。还添加了代码笔和网页https://codepen.io/jokbas-rklys/pen/zJaxQN www.thehoney.lt也许有人知道解决方案？

nohup

Answer 1

不确定为什么window.onclick事件未在这些模式弹出窗口上触发。

我在Codepen HTML中注意到的一件事是，您在两个地方都有window.onclick =函数。这不是为什么关闭模式无法正常工作的原因，只是这样就知道您不能拥有两个window.onclick回调-最后一个回调将覆盖之前的所有回调。如果要进行多个onClick降级，则必须使用window.addEventListener('click', function);。这样，您可以在单个DOM元素（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）上附加多个事件。

如上所述，在您的问题上，我不明白为什么不花太多时间就无法解决问题。

但是，我将采用稍微不同的方法来附加那些onClick事件以关闭模式：

$('.modal').on('click', function (e) {
  var $this = $(this);
  var $target = $(e.target);
  var $iframe = $this.find('iframe');

  if (!$target.is($iframe)) {
    $iframe[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    $this.fadeOut(100);
  }
});

这样，您可以将onClick侦听器直接附加到模式弹出窗口，并且click事件不必在DOM链上传播（冒泡）。我最好的猜测是click事件在某处被中断，并且从未到达window。我建议您仔细阅读事件冒泡，因为它通常是导致附着在window，document或DOM树上方的其他DOM元素上的事件不触发（https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture的原因

与您的onClick函数相比，我还简化了逻辑。当我们将onClick事件直接附加到弹出窗口时，我们确切地知道单击了哪个弹出窗口（被单击的弹出窗口已分配给this）。然后，我们需要检查是否单击了iframe，是否没有停止视频并关闭模式。

为了公平（明确），我们甚至不必检查是否单击了iframe，因为iframe上的点击事件也将停止，并且实际上不会传播到弹出窗口。我添加了该检查以供将来参考，因此很清楚如何检查我们单击的内容。

希望这会有所帮助。

为什么JavaScript无法在iPhone Safari中使用

1 个答案: