Javascript 如何使用touchstart和touchend事件跟踪移动设备上跨域iframe上的点击

我刚刚了解了如何在跨域iframe上检测单击事件，但它仅适用于桌面，以下代码在检测iframe内的单击事件时起作用，但是，我也需要它在移动设备上工作，我尝试使用

touchstart

和

touchend

事件为该脚本添加移动支持，但它不起作用

 //Google ADs track conversion
$( document ).ready(function() { 

        var iframeMouseOver = false;
        var iframeTouched = false;
        $("#wh-widget-send-button")
            .off("mouseover.iframe").on("mouseover.iframe", function() {
                iframeMouseOver = true;
            })
            .off("mouseout.iframe").on("mouseout.iframe", function() {
                iframeMouseOver = false;
            });

        //Add mobile support to this script
        $("#wh-widget-send-button")
            .off("touchstart").on("touchstart", function() {
                iframeTouched = true;
            })
            .off("touchend").on("touchend", function() {
                iframeTouched = false;
            });

        $(window).off("blur.iframe").on("blur.iframe", function() {
            if(iframeMouseOver || iframeTouched){
                 console.log("Iframe Clicked");
                 gtag_report_conversion();
            }
        });
});

更新 根据要求的HTML，它只是div中的一个简单的iframe，还稍微清除了上面的代码，以关注重要部分：

<div id="wh-widget-send-button">
  <iframe src="http://anyexternaldomain.com"></iframe>
</div>

---

我不确定您为什么需要检查悬停或触摸。您只需检查单击并执行操作

主要概念是通过分配

指针事件：none，从iframe中删除事件处理。这将使父元素
wh widget send button
接收所有事件，然后您可以根据需要处理它们

您可以尝试以下代码：


$（文档）.ready（函数（）{
$（“#wh小部件发送按钮”）。关闭（“单击”）。打开（“单击”，函数（）{
控制台日志（“单击”）；
//gtag_报告_转换（）；
});
});
iframe
{
指针事件：无；
}

不幸的是，您试图做的事情是不可能的。web浏览器的开发人员故意这样做，以避免恶意的点击劫持行为。无法捕捉进入iframe的单击。您当前在桌面上所做的只是跟踪鼠标是否悬停在iframe上，而不是它是否被实际单击。不幸的是，您甚至无法在移动设备上执行此操作，因为触摸屏上的触摸会自动传输到iframe，因此没有适用于触摸屏的“悬停”概念。很抱歉告诉你这个坏消息
 我可以也包括HTML吗？如果你想，你可以用你的答案做一个JSFIDLE对不起。我的意思是你能包括HTML吗？@KalimahApps完成了再次检查。我不确定您需要与iframe进行多少交互。只是在iframe上点击一下，还是需要与iframe中的某些元素进行交互？此代码的问题是，虽然它在检测iframe上的点击时确实“起作用”，但它使它无法与iframe中的任何内容进行交互，我想这就是OP说它不起作用的原因。