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

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

0 голосов
/ 30 марта 2010

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

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

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

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

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

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

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

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

Ответы [ 2 ]

1 голос
/ 30 марта 2010 
<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. ]

0 голосов
/ 30 марта 2010

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

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

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

...