Question

我有一个页面，其中的图像会在点击时播放声音。但是，当我点击我的页面时，如果我在顶部向上，如果我在页面底部，无论出于何种原因，它都会向下。

我尝试了所有解决方案：How do I fire a javascript playsound event onclick without sending the user to the top of the page?

但似乎没有效果。我已经尝试将javascript放在头部或正文标签中，但问题似乎仍然存在于我做的事情。我只需要一个图像在点击时播放声音，而不是移动（我将在页面上显示数百个小图像，如果他们继续移动我的页面，向上或向下滚动会很多。）

我做错了什么？

这是我的代码：

`

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">

<html>

<head>
<title>Easy and Simple Learning    </title>

<script language="javascript" type="text/javascript">

 function playSound(soundfile) 
{document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";}

</script>

</head>

<body>

<span id="dummy"></span>

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

</body>

</html>`

PS：我正在使用Chrome，这可能是个问题吗？提前谢谢了。

Answer 1

在锚点（）

之后关闭标签

跳过href =“＃”，这会导致浏览器跳转到一个不存在的命名锚点。可能导致这种闪烁。

改为使用此

<a href="javascript:void(0);" onclick="playSound('sound.mp3');">
your label....
</a>
<span> <!-- missing ? -->

Answer 2

为什么不使用a，而不是使用div标记？

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

这可以避免必须覆盖默认链接行为。我还建议将JavaScript和CSS移动到单独的文件中，以使代码更易于管理。

编辑 - 再试一次：

尝试最初将音频添加到页面并在点击时触发播放事件。

HTML：

<div onclick="playSound('myAudio');" style="cursor: pointer;">
  <img src="image.png" />
  <audio id="myAudio">
    <source src="sound.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>
</div>

JS：

function playAudio(audioId) {
  var audio = document.getElementById(audioId);
  var isPlaying = !audio.paused && !audio.ended && 0 < audio.currentTime;

  if (isPlaying === false) {
    audio.play();
  } else {
    audio.pause();
  }
}

奖励，再次单击图像将暂停音频。 JSFiddle

Answer 3

尝试在onclick事件中添加“return false”。它告诉浏览器它不必执行与onclick事件关联的默认操作。请特别注意，在代码中将onclick="playSound('sound.mp3');">更改为onclick="playSound('sound.mp3'); return false;">。

单击图像时页面移动

3 个答案: