WebTaller - Aprender DHTML - Eventos de Ratón

Eventos del Ratón

Justamente como puedes capturar eventos del teclado, puedes capturar eventos del ratón como en onMouseDown, onMouseUp, y onMouseMove - hay otros si deseas leerlos pero estos son los más importantes. Para cada uno de estos eventos, puedes obtener la localización del ratón y utilizar esos coordinadores para mover tus capas.

La parte primera explicará lo básico de los eventos del ratón fijado en un cross-browser, la segunda parte explicará las funciones de los eventos del ratón utilizado por elementos del DynAPI.

Repasando el Documento Eventos del Ratón:
Cada un de los onMouseDown, onMouseUp, and onMouseMove son iniciados de la misma forma. Aquí esta la forma que a mi me gusta utilizar:

function init() {
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
}
function mouseMove(e) {
}
function mouseUp(e) {
}

La función nombres puede ser lo que tú quieras, pero para que sea consistente siempre utilizaré mouseDown(e), mouseMove(e), and mouseUp(e). Netscape tiene un modelo diferente que IE el cual requiere que tú captures los eventos antes de que estos sean utilizados. En IE estos son siempre capturados mouseDown(e), mouseMove(e), and mouseUp(e).

Trayendo los Coordinadores del Ratón

Las "e" en cada función representa al evento del objeto que ha sido creado adentro para Netscape. Así es como Netscape obtiene la localización del ratón:

function mouseDown(e) {
if (is.ns) {
var x = e.pageX
var y = e.pageY
}
}

IE ignora las "e" porque es un sistema un poco diferente para capturar eventos del ratón. IE tiene un objeto llamado ventana "window.event" el cual controla todos los eventos. El objeto "window.event" contiene la propiedad X y Y la cual representa la localización de donde el evento del ratón ocurrió:

function mouseDown(e) {
if (is.ns) {
var x = e.pageX
var y = e.pageY
}
if (is.ie) {
var x = e.pageX
var y = e.pageY
}
}

Usuarios que han visto este tema también han visto...

- Pase de diapositivas con DHTML
- Reloj DHTML, con Javascript y capas
- Objetos Tabs
- Efectos de transición
- Efecto cortina con DHTML

- Versión imprimible de este documento
- Enviar por e-mail este documento