Cartographie des coordonnées de clic de la souris sur la carte thermique pour différentes résolutions et tailles d'écran en JS / Jquery

Question

Je voudrais collecter des données de clic de souris à partir d'une page Web qui est consultée sur des appareils de résolution et de taille d'écran différents et mapper avec précision ces coordonnées de clic sur un superposition pour afficher la carte thermique. Comment puis-je le faire en JavaScript/jQuery? En tenant compte du cas où la page affichée peut être faire défiler vers le haut/bas et redimensionner la fenêtre du navigateur à tout moment par l'utilisateur modifiant ainsi les positions relatives des éléments DOM à l'écran. Par exemple, j'ai un div principal comme conteneur des documents et deux divs comme colonnes à l'intérieur. Normalement, les colonnes seront affichées côte à côte dans le div conteneur. Mais lorsque l'utilisateur redimensionne la page à une taille plus petite, la colonne de droite se déplacera et se placera sous la 1ère colonne. Ainsi, son décalage X et Y a changé selon la page. Maintenant, si un utilisateur clique sur cette 2ème colonne, les clics ne seront pas cartographiés avec précision à l'écran lorsque je vois la carte thermique sur mon appareil en vue plein écran. Je suis débutant, donc j'aurais besoin de connaître les détails.

Answer 1

Je travaille sur la même chose pour collecter les coordonnées des clics à tracer sur la carte thermique. La méthode que j'ai utilisée consiste à obtenir les coordonnées du clic et à les convertir en moyenne de pixels par rapport au document, puis lors du traçage les convertir à nouveau en coordonnées.

window.addEventListener("click",function(){

    var posx = 0;
    var posy = 0;
    TotalX = document.body.scrollWidth; 
    TotalY = document.body.scrollHeight;
    if (!e) {
        var e = window.event;
    }
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    console.log("X" + ((posx * 100)/TotalX)); //Just For Debugging
    console.log("Y" + ((posy * 100)/TotalY)); // For Debugging
    return {
        x : ((posx * 100)/TotalX),
        y : ((posy * 100)/TotalY)
    };

});

Les coordonnées ne sont pas trouvées par rapport au document fonctionnera assez bien avec les clics sur ordinateur mais pas avec les clics sur mobile. Vous pouvez mettre une condition pour éviter les clics sur mobile ou les enregistrer différemment.