Как запустить событие воспроизведения звука Javascript по клику, не отправляя пользователя в верхнюю часть страницы?

Question

У меня на странице на сайте есть следующий код - когда пользователь нажимает на изображение, которое воспроизводит звук:

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

Все это прекрасно работает, но изображение находится внизу страницы, и когда пользователь щелкает изображение, оно перенаправляется обратно в верхнюю часть страницы. Есть ли способ заставить это работать так, чтобы было только изменение звука, а не визуальное (если это имеет смысл!)?

При использовании функции наведения мыши, например

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

пользователь остается там, где он был на странице, но я бы хотел, чтобы у него была возможность воспроизводить звук при нажатии, а не при опрокидывании.

Answer 1

Проблема в вашем атрибуте href.# как якорь отправляет его в верхнюю часть страницы.Используйте

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

Кроме того, всегда включайте атрибут href для ссылок.

Answer 2

Вы можете (и я думаю, что более правильно в случаях, когда поддержка Javascript ограничена), использовать ссылку вроде:

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

вместо Grexis, потому что, если используемый вами браузер не поддерживает Js, событие onclick никогда не будет запущено и, следовательно, Js не будет прочитано. Вероятно, это не будет проблемой, но все же вам следует подумать об использовании более совершенных методов кодирования.

Answer 3

вместо того, чтобы иметь событие onclick в теге, избавьтесь от него и поместите его в тег img.если вам нравится курсор для ссылок, вы также можете изменить стиль.

Пример кода с отступом, поэтому он действительно отображается в сообщении.