onMouseMove получить положение мыши - PullRequest
Новая
       47

onMouseMove получить положение мыши

18 голосов
/ 10 июня 2010

В javascript, в обработчике события javascript для onMouseMove, как получить положение мыши в x, y, которое соответствует вершине страницы?

Ответы [ 4 ]

25 голосов
/ 10 июня 2010

если вы можете использовать jQuery, то поможет : 

<div id="divA" style="width:100px;height:100px;clear:both;"></div>
<span></span><span></span>
<script>
    $("#divA").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

</script>

Вот пример только для javascript: 

var tempX = 0;
  var tempY = 0;

  function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
      tempX = event.clientX + document.body.scrollLeft;
      tempY = event.clientY + document.body.scrollTop;
    }
    else {  // grab the x-y pos.s if browser is NS
      tempX = e.pageX;
      tempY = e.pageY;
    }  

    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}  

    document.Show.MouseX.value = tempX;//MouseX is textbox
    document.Show.MouseY.value = tempY;//MouseY is textbox

    return true;
  }
5 голосов
/ 28 февраля 2013

Может быть немного излишне использовать d3.js только для поиска координат мыши, но у них есть очень полезная функция под названием d3.mouse(*container*).Ниже приведен пример выполнения того, что вы хотите сделать: 

var coordinates = [0,0];
d3.select('html') // Selects the 'html' element
  .on('mousemove', function()
    {
      coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to
                                    // the top of the page (because I selected
                                    // 'html')
    });

В вышеприведенном случае координата x будет coordinates[0], а координата y будет coordinates[1].Это очень удобно, потому что вы можете получить координаты мыши относительно любого контейнера, который вы хотите, заменив 'html' на тег (например, 'body'), имя класса (например, '.class_name') или идентификатор (например, * 1012).*).

4 голосов
/ 25 ноября 2016

Это проверено и работает во всех браузерах: 

   function getMousePos(e) {
       return {x:e.clientX,y:e.clientY};
   }

Теперь вы можете использовать его в таком событии: 

  document.onmousemove=function(e) {
       var mousecoords = getMousePos(e);
       alert(mousecoords.x);alert(mousecoords.y);
  };
4 голосов
/ 10 июня 2010

Особенно при событиях перемещения мышью, которые запускаются быстро и яростно, хорошо урезать обработчики перед их использованием- 

var whereAt= (function(){
    if(window.pageXOffset!= undefined){
        return function(ev){
            return [ev.clientX+window.pageXOffset,
            ev.clientY+window.pageYOffset];
        }
    }
    else return function(){
        var ev= window.event,
        d= document.documentElement, b= document.body;
        return [ev.clientX+d.scrollLeft+ b.scrollLeft,
        ev.clientY+d.scrollTop+ b.scrollTop];
    }
})()

document.ondblclick = function (e) {alert (whereAt)(е))};

...