Evitar animación de botón al pulsar "click"

Negora · #1 (**permalink**) 23/01/2008, 06:10

Hola compañeros:

He intentado de mil y una maneras, pero al final me he visto obligado a tener que consultar. Os cuento...

Como sabéis, en los botones de un formulario, ya sean creados mediante etiqueta "input" o "button", al hacer click se suele producir una animación que hace que el contenido de desplace ligeramente hacia adelante y hacia abajo y que los bordes en relieve que por defecto renderiza el navegador cambien.

Aplicando estilos es posible eliminar ese borde. Sin embargo, luchar contra el desplazamiento del contenido es más peliagudo. Os cuento lo que he probado...

SOLUCIONES ESPECÍFICAS DE CADA NAVEGADOR

En Firefox (motores Gecko en general) la solución es sencilla: Establecer el "padding" mediante CSS a una cantidad cualquiera. Hecho eso, ni se menea.

En Opera (motores Presto en general) hay que recurrir a una solución un poco conflictiva, que consiste en disparar un evento "mouseup" cuando se produce el "mousedown" por parte del usuario. Aun así, a veces muestra un pequeño parpadeo producido por la asincronía.

En Internet Explorer (motores Trident en general) ni una solución ni otra funcionan.

SOLUCIÓN GENERAL

Devanándome los sesos pensé en otra solución, aunque exclusiva de la etiqueta "button", pero que funcionó (teniendo "button" quién quiere "input" XD ). Pensé que quizá jugando con el posicionamiento podría engañar al motor de renderizado.

Y así fue. Si asignamos "position: relative" al botón y metemos su contenido en un elemento con "position: absolute" (como una capa "div"), el motor no puede aplicar ese desplazamiento en la animación y evitamos el problema.

¿Inconveniente? Que en motores Presto y Trident funciona de maravilla, pero en Gecko hay que seguir indicándole un "padding" concreto. Además, no entiendo por qué demonios deja la capa más allá de la coordenada (0,0), aun indicándole explícitamente que se quede ahí. De hecho, concretamente añade 2 píxeles en la horizontal y aproximadamente un 50% de la altura del botón en vertical. He probado con Firefox 3 Beta 2 (por confirmar si está solucionado) y sigue igual.

Si queréis reproducir esta última solución:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	
		<style type="text/css">
	
			#bt { position: relative; left: 0px; top: 0px; width: 100px; height: 24px; padding: 0px;  }
	
			#div { position: absolute; left: 0px; top: 0px; width: 100px; height: 24px; }
	
		</style>
		
	</head>

	<body>

		<button id="bt">
			<div id="div">xxx</div>

		</button>

	</body>
	
</html>

Teniendo todo eso en cuenta he pensado en crear un script JS que para navegadores Triden (IE) y Presto (Opera) añadan esa capa extra a los botones. No quería recurrir a JS condicionado pero no queda otra.

¿Alguien sabe si existe otro sistema más cómodo? Sé que a muchos el hecho de que se desplace el contenido le es indiferente. Pero soy un maniático, que le voy a hacer.

Muchas gracias y un saludo :D .

Negora · #2 (**permalink**) 23/01/2008, 10:16

Por cierto, quisiera aclarar que la razón por la que necesito usar un botón es porque quiero que la navegación mediante tabulaciones se encuentre disponible en mis formularios en todos los navegadores. Si no fuera por eso usaría una capa "DIV" sin más ;) .

MODIFICACIÓN: Otra cosa más que se me ha olvidado. En navegadores Gecko el método "preventDefault" del objeto Event funciona también bien y evita la animación inherente al navegador. En Presto y Trident, nada de nada. Indicar que éste sería el método lógico de hacer las cosas... Si funcionasen.

Negora · #3 (**permalink**) 23/01/2008, 14:11

Hola de nuevo:

Finalmente he logrado crear un pequeño script que se encarga de construir la estructura y atributos CSS necesarios automáticamente, con la única necesidad de crear botones de la forma usual (sólo los de etiqueta "button"). He reutilizado la segunda solución que indiqué en el primer mensaje. Hace un barrido de todo el documento una vez esté cargado éste.

Para evitar los problemas con Firefox, en éste evito dicha creación y me limito a cancelar el efecto de pulsación mediante el método "preventDefault" del objeto de evento. Considero innecesario hacerle trabajar de más cuando él no lo necesita.

Si alguien está interesado en el código, que lo indique. Un saludete.

rol2007 · #4 (**permalink**) 23/01/2008, 14:26

creo que deberías poner un pequeño formulario con el boton de ejemplo

seria útil para futuras consulta al foro

gracias de antemano

Negora · #5 (**permalink**) 26/01/2008, 08:44

Holas. En cuanto tenga tiempo pongo un ejemplo y adapto el código al resto de mortales, que en ella tiro de mucho de mis librerías y son algo tochas. Un saludete.

Negora · #6 (**permalink**) 15/02/2008, 10:17

Buenas, al final mi solución sufría de problemas en Mozilla Firefox 2 por un error en el renderizado de Gecko, ya que recolocaba el contenido del botón fuera del área visible de éste. En IE y Opera funcionaba correctamente.

Por todo ello, y para no tener que parchear el código según navegador, busqué una solución aun más "radical", pero igualmente efectiva (sólo con botones de etiqueta "button", no con "input").

Consiste básicamente en tomar los botones de la página, extraer el contenido de estos respecto del DOM, envolver dicho contenido en elementos DIV posicionados de forma absoluta (tomando como referencia las posición y dimensiones del botón) y reinsertar dichos DIVs en sus respectivos botones.

El hecho de reinsertar los DIVs como nodos hijos de los botones y no de cualquier elemento como puede ser "body" tiene como propósito no romper la herencia CSS existente. De esa manera, si teníamos aplicado un pseudoestilo "hover" que cambiaba el color del texto del botón, éste se seguirá produciendo dentro del DIV.

Este mecanismo puede provocar problemas de solapamiento en el eje Z (por eso antes de tener que recurrir a este método prefería posicionar los DIVs de forma relativa, porque esto no pasaba). Sin embargo, controlando dinámicamente la propiedad "z-index" de los objetos se soluciona. Yo por el momento creo los DIVs de los botones sin indicar eje Z porque no me face falta.

Un código de ejemplo:

Código:

<script type="text/javascript">

     var bt = document.getElementById ("my_bt");
     var div = document.createElement ("div");
     
     for (var i = 0; i < bt.childNodes.length; i++) {
          div.appendChild (bt.removeChild (bt.childNodes [i]));
     }

     div = bt.appendChild (div);
     
     (Cambios CSS necesarios para posicionar el DIV respecto del botón)

</script>

<button id="my_bt">My button</button>

Dicho código se puede automatizar para que seleccione todos los elementos "button" de la página.

Los cambios para posicionar el CSS no tienen mucho misterio. Usando las propiedades "offsetLeft", "offsetTop", "offsetWidth" y "offsetHeight" del botón uno puede colocar el DIV alieado a la derecha, izquierda, medio, arriba...

Por último, si alguien lee esto y desconoce los atributos y métodos de los diferentes modelos DOM, sonándole eso de "childNodes" y "parentNode" a Chino, es recomendable informarse de todas las maneras que hay de hacer las cosas en JavaScript. Por ejemplo, en Mozilla Developer Center . Sé que muchos dirán que esta aclaración es una tontería, pero como yo empecé hace años de forma amateur y esto era un "sindiós", por echar una mano a quien retome esto tras años sin tocarlo.