Búsqueda personalizada
 
 
 
 
Eventos mousedown y mouseup
 

El evento mousedown se dispara cuando presionamos alguno de los botones del mouse y el evento mouseup cuando dejamos de presionar el botón.

Implementemos una página que contenga una tabla con una fila y dos columna, al presionar el botón del mouse dentro de una casilla de la tabla cambiar el color de fondo de la misma por amarillo y cuando levantamos el dedo del mouse regresar a color blanco la casilla.

pagina1.html

<html>  
  <head> 
   <title>Problema</title>  
   <script type="text/javascript" src="../jquery.js"></script>  
   <script type="text/javascript" src="funciones.js"></script>  
  </head>  
  <body>  
  <table border="1">  
  <tr>  
  <td>1111111111</td>
  <td>1111111111</td>  
 </tr>  
 </table>  
 </body>  
</html>   

funciones.js

  var x;   
  x=$(document);  
  x.ready(inicializarEventos);    

  function inicializarEventos()  {    
    var x;    
    x=$("td");    
    x.mousedown(presionaMouse);    
    x.mouseup(sueltaMouse);  }      

  function presionaMouse()  {    
   $(this).css("background-color","#ff0");  }    

  function sueltaMouse()  {    
  $(this).css("background-color","#fff");  }  

Primero asociamos los eventos mousedown y mouseup a todos los elementos td del documento:

  var x;    
  x=$("td");    
  x.mousedown(presionaMouse);    
  x.mouseup(sueltaMouse);  

Cuando se presiona algún botón del mouse dentro de una celda de la tabla se dispara la función:

 function presionaMouse() {    
  $(this).css("background-color","#ff0"); }  

De forma similar cuando se suelta el botón del mouse se dispara la función:

 function sueltaMouse()  {    
  $(this).css("background-color","#fff"); }
 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion