JavaScript Положение мыши над элементом (код не работает) - PullRequest
Новая
       15

JavaScript Положение мыши над элементом (код не работает)

1 голос
/ 03 декабря 2009

Я хочу отобразить положение мыши, когда оно внутри элемента .. вот код: 





Mouse Events Example


 function GetMousePositionInElement(ev, element)
           {
               var osx = element.offsetX;
               var osy = element.offsetY;

               var bottom = osy + element.height();

               var x = ev.pageX - osx;
               var y = bottom - ev.pageY;

               return { x: x, y: y, y_fromTop: element.height() - y };
           }
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        var elem = document.getElementById("div1");
        var xp = GetMousePositionInElement(oEvent, elem).x;
        var yp = GetMousePositionInElement(oEvent, elem).y; 

        oTextbox.value += "\n x = " + xp + "y= " + yp;

    }



<P> Use your mouse to click and double click the red square.</p>
div style="width: 100px; height: 100px; background-color: red"
     onmouseover="handleEvent(event)"
     id="div1"> /div
<P> textarea id="txt1" rows="15" cols="50"> /textarea> </p>

В коде есть проблема. Положение мыши не отображается внутри texArea. Какие изменения я должен сделать, чтобы код работал и работал правильно? (Конечно, не весь код отображается, и я удалил некоторые из кодировщика <и>, чтобы показать вам некоторые части кода, которые не отображаются иначе, но синтаксис кода правильный, это не проблема)

Спасибо.

1 Ответ

1 голос
/ 03 декабря 2009

var osy = element.offsetY;

Нет такого свойства как offsetY. Вы можете думать о offsetTop. Однако обратите внимание, что значения offsetLeft / Top относятся к offsetParent, а не к странице. Если вам нужны координаты относительно страницы, вам нужно перебрать offsetParents или, так как вы, кажется, включаете jQuery, вызвать его offset функцию, которая делает это просто: 

var offset= $(element).offset();
var osx= offset[0], osy= offset[1];

var bottom = osy + element.height ();

element - это объект DOM HTMLDivElement, а не объект-обертка jQuery, поэтому он не имеет метода height(). Либо добавьте упаковщик: 

var bottom= osy+$(element).height();

или используйте эквивалентный метод DOM: 

var bottom= osy+element.offsetHeight;

var y = bottom - ev.pageY;

Примечание pageY не является частью стандарта DOM Events и также недоступно в IE. Вы можете рассчитать его, используя стандартное свойство clientY и настроив для страницы scrollTop. Опять же, jQuery делает это для вас, добавляя расширение Firefox pageY для всех браузеров, когда вы используете его собственные методы для привязки вашего обработчика событий: 

$('#div1').mouseover(handleEvent);

вместо встроенного атрибута обработчика событий onmouseover=....

...