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.
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
}
}
Esos valores reflejan donde la ventana del browser en IE´s el evento del ratón ocurrió - esto no necesariamente refleja exactamente donde en el documento ha sido cliqueado. Si haces un scroll down a un evento ventana y "window.event.y" el valor no está seguro con el documento, así que tenemos que contar por esa discrepancia nosotros mismos. Tienes que añadir cuando ese documento ha sido scrolled con solo utilizar document.body.scrollTop.
var x = event.x+document.body.scrollLeft var y = event.y+document.body.scrollTop
Lo que siempre me ha gustado hacer es compactar los x-y capturadores con estas dos líneas:
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
Ahora cuando cualquiera de estos eventos ocurra podremos trabajar con los variables X y Y (la localización actual del ratón) y podemos hacer con ellos unas cosas bastante creativas.
Una mejora que me gusta hacer es de solo permitir los clics en el lado izquierdo del botón del ratón. En Netscape puedes chequear por e.which, y en IE puedes chequear por event.button:
function mouseDown(e) {
if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
}
Me gusta hacer esto porque la acción default cuando es cliqueado el ratón en el botón derecho es de mostrar abiertamente el comando menú (Devolverse "Back", "Adelantarse" Forward etc).
Valores de Devolverse:
Los valores de devolverse en los eventos de ratón son bastante importantes para Netscape. Cuando cliqueas el ratón en algún lado en una página, él document recibe al evento primero (y así el evento mouseDown es desencadenado). Incluso si estas cliqueando en un hyperlink el evento mouseDown será llamado. Con devolverse verdadero en el controlador de eventos permites a otros elementos en la página utilizar ese evento. Si el devolverse es falso pararás a la página de hacer cualquier otra cosa con ese evento. Entonces por ejemplo si fueras de devolverte falso en tu controlador mouseDown:
function mouseDown(e) {
return false
}
Entonces nunca podrás optar de cliquear en un hyperlink - el cual obviamente no es querido. Siempre devolviéndose verdadero no es tampoco la respuesta porque a veces elementos en las páginas van a interferir con lo que desees hacer con el ratón. También en MacIntosh no hay un botón izquierdo en el ratón. Entonces para abrir el comando menú debes de presionar el ratón por casi un segundo antes de que se muestre. Esto causas problemas mayores. Pero por devolverse a falso en el controlador mouseDown no permitirá que esto ocurra.
El evento mouseMove es también un poquito doloroso. En el documento, el evento mouseMove es lo que te permite de seleccionar/destacar texto en la página (por razones copiar/pegar). Con devolverse a falso en el evento mouseMove tu incapacitas a Netscape para de destacar el texto.
Así que cuidadosamente selecciona el devolverse a falso solamente cuando estas haciendo un evento especificado, todas las otras veces devolcerá verdadero. Nota que devuelva verdadero cuando chequea si el botón izquierdo del ratón no ha sido cliqueado (he dejado al documento utilizar el evento mouseDown).
En fin, estas son la funciones del ratón las cuales trabajan muy bien.
function init() {
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (is.ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
function mouseDown(e) {
if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
//tu código va aquí
return true
}
function mouseMove(e) {
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
// tu código va aquí
return true
}
function mouseUp(e) {
var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft
var y = (is.ns)? e.pageY : event.y+document.body.scrollTop
// tu código va aquí
return true
}
Ejemplo: mouseevents1.html [ fuente] - para ver ejemplo de un ligero evento del ratón.
Eventos del Ratón DynAPI
Para reemplazar la necesidad de insertar manualmente las funciones de arriba, he creado un fichero default JavaScript el cual estaré utilizando en las demostraciones que requieren eventos del ratón. Estas secciones particulares se encuentran en el objeto Arrastrar y el objeto Scroll2.
Para utilizar los eventos del ratón DynAPI tienes que incluir el fichero mouseevents.js después de dynlayer.js y ANTES del drag.js y scroll2.js si los estuvieras utilizando:
<script language="JavaScript" src="../dynlayer.js"></script>
<script language="JavaScript" src="../mouseevents.js"></script>
<script language="JavaScript" src="../drag.js"></script> // if needed
<script language="JavaScript" src="../scroll2.js"></script> // if needed
Estos ficheros estarán al cuidado de recuperar los co-ordinates del ratón, y de controlar todas las operaciones requeridas para operar el Scroll2 y el objeto Arrastrar. Para iniciar estos tienes que llamar a la función initMouseEvents() en el init():
function init() {
initMouseEvents()
}
En lugar de tener tus mismas funciones mouseDown, mouseMove, y mouseUp, ahora puedes tener formas simples para obtener los coordinadores del ratón con solo incorporar las funciones DynMouseDown, DynMouseMove, y DynMouseUp:
function DynMouseDown(x,y) {
// tu codigo para mousedown
return true
}
function DynMouseMove(x,y) {
// tu codigo para mousemove
return true
}
function DynMouseUp(x,y) {
// tu codigo para mouseup
return true
}
Estas funciones son opcionales. Si los eventos del ratón son solamente utilizados por el Scroll2 o el Arrastrar, entonces no deben ni siquiera estar incluidas y tu fuente de código porque las funciones vacías que se encuentran arriba se encuentran ya instaladas en el código de MouseEvents.
Ejemplo: mouseevents1.html [fuente] - para un ejemplo Eventos del Ratón DynAPI.En la lección DynLayer Evento explicare de como utilizar los eventos basados en capas los cuales son esencialmente los mismos que he resumido aquí excepto todos los eventos ocurridos directamente en la capa.
| Casa | Próxima Lección: Conceptos de Arrastrar y Dejar caer |