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

Question

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

这在桌面浏览器上完美运行，当我直接导航到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：根据要求我添加了一个点击/点击绑定到＆＃39; N＆＃39; （我知道它是一个小命中框，对不起）在示例链接的右上角。

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

当在iframe中点击时，我得到没有console.log。但我确实得到了浏览器快速灰色闪光点击反馈。但是在检查元素时，我可以看到它已成功应用.css()调整。 在查看不在iframe成功console.log的<{p>}

的链接时轻点

Answer 1

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

要解决此问题，您可以拦截用户＆＃34;点击＆＃34;在事件被阻止之前。例如，使用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开发人员工具运行此代码，视频按预期播放：