在iOS设备上点击/点按不在iframe中触发的事件

Question

我有一个iframe实例,其中包含一个带有单击处理程序的元素.iframe包含一个带有播放按钮图形的视频,上面附有一个点击事件.click事件触发视频播放,隐藏自身和console.logs消息,说它已被触发.

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

以下是我的示例的链接:

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

带有视频iframed的页面的链接:(不会触发点击/点击事件) 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的时候点击它.但我确实得到了浏览器快速灰色闪光点击反馈.但是在检查元件时,我可以看到它已经成功应用了.css()调整.当在观看链接时不被窃听iframe是成功console.log的

Answer 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开发人员工具运行此代码,视频按预期播放: