在iOS设备上点击/点按事件不会在iframe中触发 [英] Click/Tap event not triggering in iframe on iOS devices

问题描述

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

I have an instance of an iframe that contains an element with a click handler. The iframe contains a video with a play button graphic overlaid with a click event attached to it. The click event triggers the video to play, hides itself and console.logs a message to say it's been triggered.

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

This functions perfectly on desktop browsers, and when i navigate directly to the iframe url on an iOS device. However, when the iframe is embedded the play button's click/tap event is not fired.

以下是我的示例的链接：

Here are links to my examples:

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

The direct link to the video page: (works as intended on iOS) http://www.newsryde.com/articlevideo/1085078/

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

The link to the page with the video iframed: (does not trigger click/tap event) http://www.newsryde.com/article/1085078/

附加事件的文件/行号在 /js/jm/video-player.js 〜第52行看起来像：

the file/line number where the event is attached is in /js/jm/video-player.js ~ line 52 and looks like:

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

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

the embedded iframe version of the code not only doesn't trigger the video, but doesn't trigger the console.log or element fades. I can see when tapping on the play button that the element flicker with a super quick opacity/feedback state that i believe is browser related

奇怪的是，当我删除播放时按钮元素。然后让用户直接点击< video> 元素。视频播放得很好。我可以理解它是否是一种方式（没有点击通过，或只是视频播放没有触发），但就好像整个playButton的点击处理程序被忽略

strangely though, when i remove the play button element. and just let the user click directly on the <video> element. the video plays fine. i can understand if it was one way or the other (no clicks made it through, or just the video playing didnt trigger), but it's as if the entire playButton's click handler just gets ignored

注意：
我必须为这个内容使用iframe，因为不保证其内容将来自与父页面相同的域（同样这也阻止我创建iframe的外部控件）内容）

NOTES: I MUST use an iframe for this content, as it is not guaranteed that its contents will be from the same domain as the parent page (similarly this prevents me from creating an external control to the iframe content)

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

Any help would be greatly appreciated. Thank you in advance

EDIT1：根据要求我添加了一个点击/点击绑定到'N'（我知道这是一个小打击框，对不起）在顶部示例链接的右上角。

upon request i added a single tap/click bind to the 'N' (i know it's a small hit box, sorry) in the top right hand corner of the example links.

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

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

When this is tapped while in the iframe i get no console.log. but i do get the browser quick grey flash tap feedback. however when inspecting the element i can see that it has successfully applied the .css() adjustment. When tapped when viewing the link not in an iframe it successfully console.log's

推荐答案

似乎有人阻止了正常触摸事件流的默认操作： touchstart - touchmove - 点击。这样就不会调用单击事件。可能其他一些脚本通过在 touchstart 或 touchend 事件的事件对象上调用preventDefault（）或返回<来自这些事件的事件侦听器的code> false 。

It seems that someone prevents the default action of the normal touch events flow: touchstart - touchmove - click. Such that the click event is never called. Probably some other script does this by calling preventDefault() on the event object of touchstart or touchend events or by returning false from event listeners of these events.

要解决此问题，您可以在事件发生之前拦截用户的点击预防。例如，使用 touchstart 事件：

To overcome this issue you can intercept user's "tap" before the event is prevented. For example by using touchstart event:

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开发工具运行此代码，视频按预期播放：

I ran this code via Safari developer tools on my iPhone and the video plays as expected:

这篇关于在iOS设备上点击/点按事件不会在iframe中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！