Come si attiva un evento playound javascript onclick senza inviare l'utente in cima alla pagina?

Question

Ho il seguente codice in una pagina sul mio sito - quando l'utente fa clic sull'immagine di un suono gioca:

<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> 

Tutto grandi opere, ma l'immagine è in fondo alla pagina, e quando l'utente fa clic sull'immagine per essere reindirizzati nella parte superiore della pagina. C'è un modo per farlo funzionare in modo che ci sia solo un cambiamento audio, e non visivo (se questo ha senso!)?

Quando si utilizza una funzione di passaggio del mouse, invece, come ad esempio

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

l'utente rimane dove si trovavano sulla pagina, ma vorrei loro di avere la possibilità di giocare il suono clic e non sul rollover.

Answer 1

Il problema è il tuo attributo href. # come un'ancora lo manda in cima alla pagina. Utilizzare

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

Inoltre, includere sempre un attributo href ai collegamenti.

Answer 2

È possibile (e penso che è più corretto nei casi in cui il supporto Javascript è limitato), per usare un link come:

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

invece di Grexis uno, perché se il browser in uso doesn' t supporta Js, quindi l'evento "onclick" non verrà mai attivato e quindi Js non verrà letto. Probabilmente non sarà un problema, ma dovresti comunque considerare l'utilizzo di tecniche di codifica migliori.

Answer 3

invece di avere l'evento onclick in un tag, sbarazzarsi di esso e metterlo sul tag img. se ti piace il cursore per i collegamenti, puoi anche cambiare lo stile.

Il codice di esempio è stato indentato e quindi viene mostrato nel post.

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