L'événement Click / Tap ne se triggers pas dans iframe sur les appareils iOS

J'ai une instance d'un iframe qui contient un élément avec un gestionnaire de clic. L'iframe contient une video avec un graphique de button de lecture superposé avec un événement de clic attaché à celui-ci. L'événement click triggers la lecture de la video, se cache et console.logs un message indiquant qu'il a été déclenché.

Cela fonctionne parfaitement sur les browsers de bureau, et quand je navigue directement à l'URL iframe sur un appareil iOS. Cependant, lorsque l'iframe est embedded, l'événement click / tap du button de lecture n'est pas déclenché.

Voici des liens vers mes exemples:

Le lien direct vers la page video: (fonctionne comme prévu sur iOS) http://www.newsryde.com/articlevideo/1085078/

Le lien vers la page avec la video iframed: (ne triggers pas l'événement click / tap) http://www.newsryde.com/article/1085078/

le file / numéro de ligne auquel l'événement est attaché se trouve dans /js/jm/video-player.js ~ ligne 52 et ressemble à /js/jm/video-player.js :

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

la version incorporée du code iframe non seulement ne triggers pas la video, mais ne triggers pas le file console.log ou l'élément s'estompe. Je peux voir en appuyant sur le button de lecture que l'élément scintille avec un état d'opacité / rétroaction super rapide qui, je crois, est lié au browser

étrangement cependant, quand je retire l'élément de button de lecture. et laissez l'user cliquer directement sur l'élément <video> . la video joue bien. Je peux comprendre que ce soit d'une façon ou d'une autre (aucun clique n'a réussi, ou seulement la lecture de la video ne s'est pas déclenchée), mais c'est comme si tout le gestionnaire de clic de playButton était ignoré

NOTES: Je DOIT utiliser un iframe pour ce contenu, car il n'est pas garanti que son contenu provienne du même domaine que la page parente (de même, cela ne m'empêche pas de créer un contrôle externe pour le contenu iframe)

Toute aide serait grandement appréciée. Merci d'avance

EDIT1: sur request, j'ai ajouté un seul clic / clic sur le 'N' (je sais que c'est une petite checkbox, désolé) dans le coin supérieur droit des exemples de liens.

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

Quand ceci est tapé alors que dans l' iframe je n'ai pas de console.log. mais je reçois le browser rapide rétroaction de robinet instantané gris. Toutefois, lors de l'inspection de l'élément, je peux voir qu'il a correctement appliqué l'ajustement .css() . Lorsque vous appuyez sur ce lien lors de la visualisation du lien ne se trouve pas dans un iframe avec succès console.log

Il semble que quelqu'un empêche l'action par défaut du stream normal des events tactiles: touchstarttouchstartclick . De telle sorte que l'événement click n'est jamais appelé. Probablement un autre script le fait en appelant preventDefault () sur l'object événement des events touchstart ou touchend ou en renvoyant false partir des écouteurs d'events de ces events.

Pour résoudre ce problème, vous pouvez intercepter le "tap" de l'user avant que l'événement ne soit évité. Par exemple en utilisant l'événement 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(); }); 

J'ai couru ce code via les outils de développement de Safari sur mon iPhone et la lecture de la video s'est déroulée comme prévu:

entrez la description de l'image ici