visual javascript javascript-events mouse position onmousemove

javascript - mousemove visual basic



onMouseMove get mouse position (4)

si puedes usar jQuery, entonces esto te ayudará:

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

aquí solo está el puro ejemplo de 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; }

En javascript, dentro del evento javascript para onMouseMove, ¿cómo obtengo la posición del mouse en x, y corrige en relación con la parte superior de la página?


Especialmente con los eventos mousemove, que disparan rápido y furioso, es bueno reducir los manejadores antes de usarlos-

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 (e))};


Puede ser un poco excesivo usar d3.js solo para encontrar las coordenadas del mouse, pero tienen una función muy útil llamada d3.mouse(*container*) . A continuación se muestra un ejemplo de hacer lo que desea hacer:

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'') });

En el caso anterior, la coordenada x sería coordinates[0] , y la coordenada y serían coordinates[1] . Esto es extremadamente útil, ya que puede obtener las coordenadas del mouse con respecto a cualquier contenedor que desee intercambiando ''html'' con la etiqueta (por ejemplo, ''body'' ), nombre de clase (por ejemplo, ''.class_name'' ) o id (por ejemplo ''#element_id'' ).


Esto se prueba y funciona en todos los navegadores:

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

Ahora puedes usarlo en un evento como este:

document.onmousemove=function(e) { var mousecoords = getMousePos(e); alert(mousecoords.x);alert(mousecoords.y); };