¿Cómo disparo un evento javascript playsound onclick sin enviar al usuario a la parte superior de la página?

Question

tengo el siguiente código en una página en mi sitio - cuando el usuario hace clic en la imagen se reproduce un sonido:

<script language="javascript" type="text/javascript"> 
function playSound(soundfile) { 
document.getElementById("dummy").innerHTML= 
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; 
} 
</script> 
<span id="dummy"></span> 
<div id="soundimage"> 
<a href="#" onclick="playSound('sound.mp3');"><img src="image.png" /></a> 
</div> 

Todo funciona muy bien, pero la imagen es en la parte inferior de la página, y cuando el usuario hace clic en la imagen que se redirige a la parte superior de la página. ¿Hay alguna forma de hacer que esto funcione, de modo que solo haya un cambio de audio, y no uno visual (si eso tiene sentido)?

Cuando se utiliza una función mouseover lugar, como

<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a> 

el usuario permanece donde estaban en la página, pero me gustaría que tengan la opción de reproducir el sonido de clic y no en vuelco.

Answer 1

El problema es su atributo href. # como un ancla lo envía a la parte superior de la página. Use

<a href="javascript: void(0);" onclick="playSound('sound.mp3');">...</a> 

Además, siempre incluya un atributo href para los enlaces.

Answer 2

Usted puede (y creo que es más correcto en caso de que el soporte para Javascript es limitado), para usar un enlace como:

<a href="#" onclick="playSound('sound.mp3'); return false;">...</a> 

en lugar de Grexis uno, porque si el navegador que está utilizando doesn' t admite Js, entonces el evento "onclick" nunca se disparará y, por lo tanto, Js no se leerá. Probablemente no sea un problema, pero aún así debería considerar usar mejores técnicas de codificación.

Answer 3

en lugar de tener el evento onclick en una etiqueta a, deshazte de él y ponlo en la etiqueta img. si le gusta el cursor para los enlaces, puede cambiar el estilo también.

El código de ejemplo ha sido sangrado, por lo que realmente se muestra en la publicación.

<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />