當我點擊圖片時頁面移動

我有一個圖片頁面，點擊它可以播放聲音。但是當我點擊我的頁面時，如果我處於頂部，並且如果我處於頁面底部，無論出於何種原因，都會停止。當我點擊圖片時頁面移動

我嘗試了所有的解決方案在這裏sugested：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：我使用的瀏覽器，那會是一個問題？提前謝謝了。

來源

2013-05-12 user2375147

關閉標籤錨後（）

跳過HREF =「＃」，這將導致瀏覽器跳轉到一個命名錨，它不存在。可能導致這種閃爍。

而是使用

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

來源

2013-05-12 15:48:15

我用「javascript：void（0）」這個解決方案，但它在我的情況下並沒有太大的作用。當我起牀時，頁面會向下移動，而當我處於底部時，頁面不會移動。你已經糾正了你的代碼。 span標籤應該放在標籤下面嗎？（據我所知，它不應該有所作爲） – user2375147 2013-05-12 15:59:22

1）您的未正確關閉。 2）將它設置爲'... style =「width：0; height：0;」 ...'或者只是''... style =「display：none;」...' – 2013-05-12 16:39:13

我糾正了代碼並正確關閉了span標籤。如果我將它設置爲「寬度：0;高度：0;」它沒有改變，但如果我將它設置爲「display：none」，頁面不再移動，但聲音也不再播放。 a標籤應該放置在span標籤內嗎？ – user2375147 2013-05-12 17:35:16

而不是使用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

來源

2013-05-12 16:43:43 ljfranklin

謝謝你的建議，我試過了，但不幸的是它沒有改變任何東西。我開始認爲我應該找到解決我的問題的另一種方法。 – user2375147 2013-05-12 17:43:01

@ user2375147 - 看看我編輯的答案，看看它是否能解決你的問題。 – ljfranklin 2013-05-12 18:19:21

「音頻」標籤不僅僅在最新的瀏覽器中工作嗎？我的訪問者並不總是更新他們的瀏覽器，所以我試圖讓每個人都可以使用這個站點。 – user2375147 2013-05-14 11:31:35

嘗試向onclick事件添加'返回false'。它告訴瀏覽器它不必執行與onclick事件相關的默認操作。特別是，在代碼中將onclick="playSound('sound.mp3');">更改爲onclick="playSound('sound.mp3'); return false;">。

來源

2017-03-09 12:47:04

當我點擊圖片時頁面移動

回答

相關問題