Jak mogę aktywować zdarzenie odtwarzania JavaScript javascript bez wysyłania użytkownika na górę strony?

Question

Mam następujący kod na stronie, na moim miejscu - gdy użytkownik kliknie na obrazek, dźwięk gracz

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

to wszystko działa świetnie, ale obraz jest w dolnej części strony, a kiedy użytkownik klika obraz, do którego są przekierowywani z powrotem na górę strony. Czy jest jakiś sposób, żeby to działało, żeby była tylko zmiana audio, a nie wizualna (jeśli to ma sens!)?

Podczas korzystania z funkcji mouseover zamiast, jak

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

użytkownik pozostaje, gdzie byli na stronie, ale chciałbym je mieć możliwość grania dźwięk na kliknięcia, a nie na dachowania.

Answer 1

Problem jest twoim atrybutem href. # jako kotwica wysyła go na górę strony. Użyj również atrybutu href do linków, zawsze dołączaj atrybut href.

Answer 2

można (i myślę, że jest bardziej poprawna w przypadku gdy wsparcie Javascript jest ograniczona), aby użyć łącza jak:

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

zamiast Grexis jednego, bo jeśli przeglądarka używasz robi” t obsługuje Js, wtedy zdarzenie "onclick" nigdy nie zostanie uruchomione, a tym samym Js nie zostanie odczytane. Prawdopodobnie nie będzie to problemem, ale powinieneś rozważyć zastosowanie lepszych technik kodowania.

Answer 3

zamiast mieć zdarzenie onclick w tagu, pozbądź się go i umieść na znaczniku img. jeśli podoba Ci się kursor dla linków, możesz również zmienić styl.

Przykładowy kod został wcięty, więc faktycznie wyświetla się w poście.

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