播放音頻文件，當點擊是內部圖像時，點擊是在外部圖像時播放不同的音頻文件

我通過自己做一些小練習來學習HTML-CSS-JS。我創建了一個小的代碼，當我點擊圖片播放的mp3音頻：播放音頻文件，當點擊是內部圖像時，點擊是在外部圖像時播放不同的音頻文件

<html> 
    <head> 
    <title>Image audio exercise</title> 
    </head> 
    <body> 
    <script> 
     function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
     } 
    </script> 
    <img src="img.gif" onclick="play()"> 
    <audio id="audio" src="sound.mp3" ></audio> 
    </body> 
</html>

我希望能夠發揮不同的音頻文件時，點擊在圖像之外。有沒有簡單的方法來做到這一點？也許是一個if-else語句？

來源

2017-03-17 Gigi

檢查這個問題（http://stackoverflow.com/questions/18893144/javascript-detect-click-event-outside-of-div）也許可以幫到您:) – ayxos

做這樣的事情：

document.onclick = function(e) { 
if (e.target != document.getElementById('clickMe')) { 
    document.getElementById('audio').play(); 
}else { 
    document.getElementById('audio2').play(); 
}

}

來源

2017-03-17 12:04:52

你可以做這樣的事情。只需簡單檢查一下，看看你是否點擊了圖像或文檔。

<html> 
    <head> 
    <title>Image audio exercise</title> 
    </head> 
    <body> 

    <img id="theImage" src="img.gif"> 
    <audio id="audio" src="sound.mp3" ></audio> 

    <script> 
     var audio = document.getElementById("audio"); 
     var img = document.getElementById("theImage"); 

     document.addEventListener("click", function(e){ 
     if(e.target === img){ 
      audio.src = "sound.mp3"; 
      audio.play(); 
     } 
     else{ 
      audio.src = "sound2.mp3"; 
      audio.play(); 
     } 
     },false); 
    </script> 

    </body> 
</html>

來源

2017-03-17 12:10:03

謝謝。它按我的意思工作！ – Gigi

歡迎@吉吉 –

播放音頻文件，當點擊是內部圖像時，點擊是在外部圖像時播放不同的音頻文件

回答

相關問題