在 iOS 设备上的 iframe 中未触发 Click/Tap 事件

Posted 2023-05-09

【中文标题】在 iOS 设备上的 iframe 中未触发 Click/Tap 事件

【英文标题】：Click/Tap event not triggering in iframe on iOS devices

【发布时间】：2014-05-07 09:10:54

【问题描述】：

我有一个 iframe 实例，其中包含一个带有点击处理程序的元素。 iframe 包含一个视频，该视频带有一个播放按钮图形，上面覆盖了一个附加的点击事件。点击事件触发视频播放，隐藏自身并控制台记录一条消息，说明它已被触发。

这在桌面浏览器上完美运行，当我直接导航到 ios 设备上的 iframe url 时。但是，当嵌入 iframe 时，不会触发播放按钮的点击/点击事件。

这里是我的例子的链接：

视频页面的直接链接：（在 iOS 上按预期工作） http://www.newsryde.com/articlevideo/1085078/

带有 iframe 视频的页面链接：（不触发点击/点击事件） http://www.newsryde.com/article/1085078/

附加事件的文件/行号在/js/jm/video-player.js ~ 第52行，如下所示：

els.playButton.on('click tap', function()
    console.log('tapped');
    els.playButton.fadeOut(100);
    els.videoPauseItems.fadeOut(100);
    jwplayer(container).play();
);

嵌入 iframe 版本的代码不仅不会触发视频，也不会触发 console.log 或元素淡入淡出。当点击播放按钮时，我可以看到元素以超快速的不透明度/反馈状态闪烁，我认为这与浏览器相关

奇怪的是，当我删除播放按钮元素时。并让用户直接点击<video> 元素。视频播放正常。我可以理解这是一种方式还是另一种方式（没有点击通过，或者只是视频播放没有触发），但好像整个 playButton 的点击处理程序都被忽略了

注意事项： 我必须为此内容使用 iframe，因为不能保证其内容与父页面来自同一个域（同样，这会阻止我为 iframe 内容创建外部控件）

任何帮助将不胜感激。提前谢谢你

EDIT1：根据要求，我在示例链接的右上角添加了一个点击/单击绑定到“N”（我知道这是一个小点击框，抱歉）。

els.videoPauseItems.css('z-index', '600').on('click tap', function()
    console.log('non play button tapped');
);

当在iframe 中点击它时，我没有得到console.log。但我确实得到了浏览器快速灰色 Flash Tap 反馈。但是，在检查元素时，我可以看到它已成功应用 .css() 调整。 在查看不在iframe 中的链接时点击它成功console.log's

【问题讨论】：

您是否尝试过使用外部元素来检查是否有任何调用被触发？不是 playBUtton。只是一个简单的链接，看看是否触发了 console.log。

@EthanJWPlayer 你的意思是像另一个按钮，它附加了一个点击事件，只是console.logs？但是在播放器初始化期间没有绑定？

@EthanJWPlayer 将 EDIT 添加到主要问题并发布结果。

嗯，所以看起来这个问题在播放器之外，然后，如果只是简单的控制台日志在播放器本身之外的基本按钮上不起作用。

@EthanJWPlayer，是的，我最初认为这与播放器有关.. 但它似乎是比这更深层次的问题.. 我会继续看看我是否能想出解决方案

【参考方案1】：

似乎有人阻止了正常触摸事件流的默认操作：touchstart - touchmove - click。这样click 事件就不会被调用。可能其他一些脚本通过在 touchstart 或 touchend 事件的事件对象上调用 preventDefault() 或从这些事件的事件侦听器返回 false 来执行此操作。

要解决此问题，您可以在事件被阻止之前拦截用户的“点击”。例如通过使用touchstart 事件：

var ranOnce = false;
els.playButton.on('click tap touchstart', function() 
    // If both click and touchstart events are fired,
    // then make sure that this function isn't executed twice if click
    if (ranOnce) return;
    ranOnce = true;

    console.log('tapped');
    els.playButton.fadeOut(100);
    els.videoPauseItems.fadeOut(100);
    jwplayer(container).play();
);

我通过 iPhone 上的 Safari 开发者工具运行了这段代码，视频按预期播放：

【讨论】：

原来 iOS 故意干扰。当鼠标移动事件导致 DOM 更改时，iOS 不会触发点击事件。我已经完成了自己的测试来解决这个问题，点击事件在鼠标事件发生后的 100 毫秒内被忽略。 quirksmode.org/blog/archives/2014/02/the_ios_event_c.html