Найти позицию курсора, где пользователь нажал, и отобразить один div, где пользователь нажал

Я хочу определить положение курсора, на котором щелкнул пользователь.

И отобразите один div в нижней части страницы, где пользователь нажал.

Например, на главной странице, если кто-то нажмет на логотип.

Затем div должен отображаться в нижней части логотипа.

Таким же образом, если я нажму на нижнюю ссылку, то этот div должен отображаться в нижней части страницы.

Я использую mootools в качестве основы JS. Но любой код JavaScript будет полезен для меня.

Надеюсь, это понятно всем.

заранее спасибо
Авинаш

Источник

2 ответа 

<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>

Вы можете использовать просто window.event.x, window.event.y но это более стабильный и надежный метод получения позиций..

[вместо предупреждения, вы будете менять divElement.style.left , divElement.style.top.. убедитесь, что div position(в стиле) есть absolute, ]

Источник

С прототипом все довольно просто:

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

Все, что вам нужно сделать сейчас, это создать HTML DIV на вашем теле с "display: none" и "position: absolute;" и контент, который вы хотите.

Источник
Другие вопросы по тегам