2010-03-30 6 views
0

Je veux déterminer la position du curseur où l'utilisateur a cliqué.trouver la position du curseur où l'utilisateur a cliqué et afficher un div où l'utilisateur a cliqué

Et d'afficher un div en bas de la page où l'utilisateur a cliqué.

Par exemple sur la page d'accueil de la pile sur le flux si quelqu'un clique sur le logo.

Ensuite, le div devrait être affiché en bas du logo.

De la même manière si je clique sur le lien inférieur alors ce div devrait être affiché dans la partie inférieure de la page. J'utilise mootools comme framework JS. Mais tout code JavaScript sera utile pour moi.

Espérons que cela soit clair pour tous.

Merci à l'avance
Avinash

Répondre

1
<head> 
</script>   
function mouseX(evt) 
{ 
    if (evt.pageX) return evt.pageX; 
    else if (evt.clientX) 
     return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
    else return null; 
} 
function mouseY(evt) 
{ 
    if (evt.pageY) return evt.pageY; 
    else if (evt.clientY) 
     return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
    else return null; 
} 
function clicked(evt) 
{ 
    if(typeof evt == 'undefined') 
    evt = window.event; 
    alert("X = "+ mouseX(evt) + " Y= " + mouseY(evt); 

} 
</script></head> 
<body onclick="clicked()"></body> 

Vous pouvez utiliser simplement le window.event.x, window.event.y mais ceci est une & plus stable méthode fiable d'obtenir des positions ..

[au lieu d'alerte, u'll être changer le divElement.style.left , divElement.style.top .. assurez-vous que le div position (dans le style) est absolute. ]

+0

je l'ai essayé mais son affichage ci-dessous erreur: evt est indéfini – Avinash

+0

j'ai édité le code .. suppose que cela fonctionnera .. essayez-le. – raj

0

Avec le prototype est assez simple:

document.observe('click', function(e) { 
    $('YourDivId').setStyle({ 
     'left': e.clientX, 
     'top': e.clientY 
    }).show(); 
}); 

Tout ce que vous devez faire est maintenant créer un DIV html sur votre corps avec "display: none" et "position: absolute;" et le contenu que vous voulez.

Questions connexes