当我点击图片时页面移动答案

【问题标题】：Page moves when I click in image当我点击图片时页面移动
【发布时间】：2017-03-10 13:36:27
【问题描述】：

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

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

但似乎没有一个工作。我尝试将 javascript 放在 head 或 body 标记中，但无论我做什么，问题似乎都仍然存在。我只需要一张图片在点击时播放声音，而不是移动（我的页面上会有数百个小图片，如果它们继续移动我的页面，向上或向下滚动会很麻烦）。

我做错了什么？

这是我的代码：

<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，这可能是个问题吗？提前谢谢了。

【问题讨论】：

标签： javascript image audio onclick click

【解决方案1】：

关闭锚点后的标签()

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

改用这个

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

【讨论】：

我将此解决方案与“javascript:void(0)”一起使用，但在我的情况下并没有多大作用。现在页面在我向上时向下移动，当我在底部时不再向上移动。我已经按照您的建议更正了代码。 span 标签应该在 a 标签下吗？（据我所知，它不应该有所作为）
1) 您的未正确关闭。 2) 将其设置为... style="width:0;height:0;" ... 或只是"...style="display:none;" ...
我更正了代码并正确关闭了 span 标签。如果我将其设置为“宽度：0；高度：0；”它没有任何改变，但如果我将其设置为“显示：无”，页面不再移动，但声音也不再播放。 a标签应该放在span标签里面吗？

【解决方案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

【讨论】：

感谢您的建议，我试过了，但不幸的是它并没有改变任何东西。我开始认为我应该找到另一种方法来解决我的问题。
@user2375147 - 查看我编辑的答案，看看它是否能解决您的问题。
“audio”标签不是只能在最新的浏览器中使用吗？我的访问者并不总是更新他们的浏览器，所以我试图让每个人都能访问该网站。
我不知道我是否做对了：javascript 放在头部的“脚本”标签中，然后“div”标签放在正文中？因为当我这样使用它时，它根本不会播放声音。也许我做的不对。

【解决方案3】：

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

【讨论】：