Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как достать координаты мыши?

Автор: sagov 6.12.2005, 10:29

Может уже раньше и обсуждалось только я не нашёл в поиске поэтому я к вам вот с чем.
Элементарный скрипт который передвигает картинки в браузере

Код


function updown(id)
{
    X = event.clientX;
    Y = event.clientY;
    document.getElementById(id).style.left=X-5;
    document.getElementById(id).style.top=Y-5;
  
}

id - это id изображения которое надо просто передвинуть
Функция вызывается в <body onMouseMove="updown(id)">
Проблема в чем,а в том что все это работает в IE в Opera,но никак не хочет с Mozila.
Причем проблема на мой взгляд кроется в

Код


   X = event.clientX;
    Y = event.clientY;

Кто может мне помочь?Заранее благодарю.

Автор: Zeroglif 6.12.2005, 13:19

sagov

Посмотри топик про события...

Код


<html>
    <head>
        <title>Move div...</title>
        <script type='text/javascript'>
        function F(e,o)
        {
            e=e||window.event;
            o.style.left=e.clientX;
            o.style.top=e.clientY;
        }
        </script>
        <style type='text/css'>
            #d{position:absolute;border:solid 1px #000}
        </style>
    </head>
    <body onmousemove="F(event,document.getElementById('d'))">
        <div id='d'>слой</div>
    </body>
</html>

Автор: sagov 7.12.2005, 10:56

Огромнейшее спасибо.Все пашет.
Ух уж этот привереда Mozila

Автор: sagov 29.3.2006, 13:39

Усложняя задачу .Как вытаскивать координаты мыши я разобрался ,теперь встала другая проблема
Вытащить координаты относительно верхнего левого края самой картинки где бы она не находилась.
Как делать это в IE просто ,но опять с Mozila возникают проблемы.
Привожу код как я это делаю в IE

Код


<html><head><title></title></head>
<script>
function onimg(imgElem)
{
   x=event.x;
   y=event.y;
}
</script>
<body>
<div  class='crosshair' style='position:absolute;top:500;left:200'>
<img src='map.gif'   onclick="onimg(this)">
</div>
</body>
</html>
 если использовать вот этот метод он указывает координаты относительно края документа
<script type='text/javascript'>
        function F(e,o)
        {
            e=e||window.event;
            o.style.left=e.clientX;
            o.style.top=e.clientY;
        }
        </script>

а как получить координаты относительно края картинки?

Автор: Ciber SLasH 29.3.2006, 14:40

Цитата(sagov @ 29.3.2006, 14:39

)

Вытащить координаты относительно верхнего левого края самой картинки где бы она не находилась.

event.offsetX, event.offsetY

Автор: sagov 1.4.2006, 11:57

Опять же в IE нет проблем а как быть с Mozila?

Код


<html>
<head></head>
<script>
function onimg(imgElem,e)
{

  e=e||window.event;
  x = e.offsetX;
  y = e.offsetY;
}
</script>
<body>
<div style='position:absolute;top:50;left:90'><img src='img.gif'    onclick="onimg(this,event)"></div>
</body>
</html>

У кого какие еще предположения?Что не правильно?

Автор: Ciber SLasH 2.4.2006, 00:45

sagov, когда возникает событие, то первый параметр в функцию-обработчик отсылается ссылка на объект event, поэтому поменяй местами параметры функции.

И ещё: читай закреплённые темы
http://forum.vingrad.ru/index.php?showtopic=32350

Автор: Majesty 28.8.2007, 14:42

Вот хорошее (ИМХО) http://xhtml.ru/2006/08/23/cursor-coordinates/.

Автор: Astraller 28.8.2007, 14:52

Моё ИМХО:

Код


    FF=!document.all;
    if(FF)e.preventDefault();
    posY=FF?e.pageY:event.y+document.body.scrollTop;
    posX=FF?e.pageX:event.x+document.body.scrollLeft;

У кого проще? smile

Автор: Majesty 28.8.2007, 15:07

Этот вариант хорош всем, кроме того, что ошибается на ~60 px (причём браузерно-зависимо) smile

Автор: Astraller 28.8.2007, 15:29

А под каким браузером, если не секрет?
Ибо под IE6/7, FF1-2, Opera 6-9 все ок.

Автор: Ghirik 28.8.2007, 16:07

Цитата

У кого проще?

У меня

Код


function m(e){
b.style.top=document.body.scrollTop+e.clientY
b.style.left=document.body.scrollTop+e.clientX}

b - объект
e - event

Везде работает

Автор: Astraller 28.8.2007, 16:24

Плохо проверил. Под IE не пашет.

Автор: Ghirik 28.8.2007, 16:49

Под каким IE не работает?

Автор: Astraller 28.8.2007, 17:01

1) Под IE6.1 не пашет.
2) Под Mozilla будет криво ибо надо "px" прибавлять.
3) Требует в обязательном порядке передавать в функцию события.

Автор: Ghirik 28.8.2007, 17:20

А под IE7 проверяли? А то у меня не установлен.
У Вас, спору нет, класный код smile

. У меня просто на моем коде странички работают, и я не знал, что в IE 6.1 не работает. Посмотрите в IE7, если у Вас есть

Автор: Majesty 29.8.2007, 06:02

Цитата(Astraller @ 28.8.2007, 15:29

)

А под каким браузером, если не секрет?Ибо под IE6/7, FF1-2, Opera 6-9 все ок.

ИЕ 6.0, ФФ 1.5, Опера 9.10 - везде считает от края экрана, а не от края объекта ;)

Автор: Astraller 29.8.2007, 09:04

Цитата(Ghirik @ 28.8.2007, 17:20)

Посмотрите в IE7, если у Вас есть

Под IE 7 вроде работает, насколько правильно не проверял.

Добавлено через 2 минуты и 14 секунд

Цитата(Majesty @ 29.8.2007, 06:02)

ИЕ 6.0, ФФ 1.5, Опера 9.10 - везде считает от края экрана, а не от края объекта ;)

А где я говорил что он считает от края объекта? Он изначально считает от края экрана. Думаю вычесть необходимое число проблем составить не должно smile