How can I count the number of clicks into an Iframe using Jquery?

Question

I am looking to count the number of clicks into an iframe. I need to manage multiple clicks without moving the mouse out of the iframe.

At the moment, we can click only one time into the iframe because the blur is triggered only when I move the mouse out of the iframe.

 <!DOCTYPE html>
    <html>
    <head
        <meta charset="utf-8">
        <title>Count clicks into an Iframe with jQuery</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script>

        var clicks = 0;

    jQuery(document).ready(function($){
        // Display active element
        setInterval(function(){
            $('#actif').text(document.activeElement.tagName);
        }, 100);

        // Initilize variable
        iframe_survol = false;

        // Border checking
        $('.iframetrack iframe').mouseover(function(){
            iframe_survol = true;
        }).mouseout(function(){
            iframe_survol = false;
        });

        // Focus on window
        $(window).focus();

        // Blur listening and increment when click on iframe
        $(window).blur(function(e){
            $('<div class="alert alert-info">').html("Clic sur l'iframe").appendTo('#consoleDebug').delay(3000).fadeOut();
            parent.clicks += 1;
            document.getElementById("clicks").innerHTML = clicks;

        });

        // Focus on page
        $(document).mousemove(function(e){
            if( document.activeElement.tagName == 'IFRAME' ){
                $(window).focus();
            }
        });
    });
    </script>


    </head>
    <body>
        <p>Element actif : <span class="label" id="actif"></span></p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.</p>
        <div class="iframetrack">
            <iframe src="https://www.w3schools.com/" height="800" width="800">
    </iframe>
        </div>
     <p>Clicks: <a id="clicks">0</a></p>
        <div id="consoleDebug"></div>
    </body>
    </html>

How can I detect not only the first click into the iframe ? Thank you for your help.

Possible duplicate of [Detect Click into Iframe using JavaScript](http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript) — TheGentleman, Apr 05 '17 at 20:11
@GentlemanMax : thank you for you proposal, unfortunatly it doesn't answer my question because I need to manage multiple clicks into the iframe without moving the mouse out of it. In the solution described in your link, we can detect only the first click. — Julien, Apr 06 '17 at 10:48

How can I count the number of clicks into an Iframe using Jquery?

0 Answers0