Javascript OnClick compatible con varios navegadores?

cross-browser

Question

¿Puedo usar lo siguiente en todos los navegadores?

<a href="#" onclick="doSomething()">Click here.</a>

¿Es esta "mala práctica" con respecto a los estándares?

¿Funcionará en IE, FF, Safari y Chrome?

Answer 1

¿Puedo usar lo siguiente en todos los navegadores?

Sí

¿Es esta "mala práctica" con respecto a los estándares?

"Mala práctica" y "Cumplimiento de normas" son cosas diferentes. Cumple con los estándares, pero también, por tres razones, es una mala práctica.

1. No es discreto . Los controladores de eventos se aplican mejor con JS.
2. Se vincula a la parte superior de la página ( # ) y siempre enviará el navegador allí, incluso si se ejecuta el JS.
3. Si el JS falla, entonces no pasará nada útil. Debes construir sobre cosas que funcionen .

¿Funcionará en IE, FF, Safari y Chrome?

Sí

Answer 2

A pesar de que algunas personas podrían decir, no es una mala práctica (con la advertencia de que es el único oyente de eventos que desea sobre este elemento), y es la forma más simple (y más frecuente) de navegador cruzado para agregar un oyente de eventos, pero hay dos cambios que le haría.

En primer lugar, si Javascript no está habilitado, el enlace será inútil (aunque el # href hará que el navegador se desplace hasta la parte superior de la página, lo que probablemente no sea el deseado). Del mismo modo, con Javascript activado, al hacer clic en el enlace, el navegador seguirá el href y se desplazará hacia arriba.

En cambio, usaría algo como esto:

<a href="[url to JS-less way of doing the same thing]" onclick="doSomething(); return false">Click here</a>

Alternativamente, si realmente es algo solo de JavaScript, puede hacer que el enlace esté oculto de manera predeterminada usando CSS y usar Javascript para hacerlo visible (para que los usuarios con JS desactivado no vean un enlace inútil).

Answer 3

Debería funcionar en los navegadores que mencionaste.

Trate de adquirir el hábito de poner un ; al final de cada ''línea'' de Javascript:

<a href="#" onclick="doSomething();">Click here.</a>

Aunque va a salir bien sin él, si haces ese buen hábito, entonces puedes ahorrarte problemas más adelante cuando escribes scripts más grandes.

Si no desea que se muestre el # en la barra de direcciones:

<a href="#" onclick="doSomething(); return false;">Click here.</a>

Answer 4

Desde esta página de Wikipedia, onClick aparece en la sección de eventos Common / W3C y es compatible con los navegadores que mencionas.

Por otro lado, si no fuera así, la mayoría de las aplicaciones web no funcionarían en estos navegadores.

Answer 5

onclick es un navegador cruzado. La discusión sobre estándares y mejores prácticas es mucho más grande, por supuesto. La mayoría diría que se prefiere ''mejora progresiva''. La explicación simple de esto es que el enlace todavía haría lo correcto, la versión de JavaScript solo mejoraría el comportamiento. Si esto es importante para ti realmente depende de lo que estés haciendo, de lo que sea el proyecto, etc.

Answer 6

Funcionará en todos los navegadores, pero como práctica recomendada la mayoría se conecta con manejadores de clics como jQuery''s $(''a'').click(doSomething); lo que hace que JavaScript sea más independiente del HTML. También de esa manera se pueden conectar múltiples manejadores y con los manejadores de métodos activos de jQuery se pueden agregar a los elementos HTML que se agregan dinámicamente a la página.