單擊圖像時頁面移動

Question

我有一個帶有圖片的頁面，單擊該圖片可以播放聲音。 但是，無論什么原因，當我單擊時，如果我位於頁面頂部，則頁面下降；如果我位於頁面底部，則頁面上升。

我嘗試了此處提出的所有解決方案：如何在不將用戶發送到頁面頂部的情況下觸發javascript playsound事件onclick？

但似乎沒有任何效果。 我嘗試將javascript放在頭部或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，這可能是個問題嗎？ 提前謝謝了。

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 個解決方案

解決方案1
0 2013-05-12 15:48:15

解決方案2
0 2013-05-12 16:43:43

解決方案3
0 2017-03-09 12:47:04

單擊圖像時頁面移動

問題描述

3 個解決方案

解決方案1 0 2013-05-12 15:48:15

解決方案2 0 2013-05-12 16:43:43

解決方案3 0 2017-03-09 12:47:04

解決方案1
0 2013-05-12 15:48:15

解決方案2
0 2013-05-12 16:43:43

解決方案3
0 2017-03-09 12:47:04