How to use touchstart and touchend events to track click on a cross domain iframe on mobile devices

I just figured out how to detect click event on a cross domain iframe but it's only working for desktop, the following code works when detecting the click event inside the iframe, however, I also need it to work on mobile devices, I tried to use the touchstartand touchendevents to add mobile support to this script, but it's not working.

 //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();
            }
        });
});

UPDATE

The HTML as requested, it's just a simple iframe inside a div, also cleared the above code a bit to focus on the important part:

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

from How to use touchstart and touchend events to track click on a cross domain iframe on mobile devices