Html 如何使图像在span按钮内可单击？

我正在尝试在一个按钮中创建一个可点击的范围。span中有一个.png图像。当我在实际图像周围单击时，它将仅作为一个按钮，而不是在单击图像本身时。我找不到任何与我的问题直接相关的解决方案

HTML

编辑：

下面是JS函数。这意味着在单击某个按钮时更改音频/视频文件

[].forEach.call(document.getElementsByClassName('btn'),
function(btn) {
  btn.addEventListener('click', function(e) {

    switch (e.target.id) {
      case "btn3":
        video.src = "./video/rain2.mp4";
        video.play();
        break;
      case "btn4":
        video.src = "./video/rain1.mp4";
        video.play();
        break;
      case "btn5":
        audio.src = "./audio/rain.mp4";
        audio.play();
        break;
      case "btn6":
        audio.src = "./audio/rain2.mp4";
        audio.play();
        break;
    }
  })
})

• class=“btn3”

• 您需要目标的父级ID

• 你的说法不太令人信服。我从最近的容器中委派

const audio=document.getElementById（“音频”）；
const video=document.getElementById（“视频”）；
document.getElementById（“容器”）.addEventListener（“单击”），函数（e）{
var tgt=e.target；
如果（tgt.tagName==“SPAN”）{
var id=tgt.closest（“按钮”）.id；
控制台日志（id）
开关（id）{
案例“btn3”：
video.src=“./video/rain2.mp4”；
video.play（）；
打破
案例“btn4”：
video.src=“./video/rain1.mp4”；
video.play（）；
打破
案例“btn5”：
audio.src=“./audio/rain.mp4”；
音频播放（）；
打破
案例“btn6”：
audio.src=“./audio/rain2.mp4”；
音频播放（）；
打破
}
}
})

span.btn3{
背景：url(https://img.icons8.com/cotton/2x/cloud.png)不重复左上角；
背景尺寸：包含；
光标：指针；
显示：内联块；
高度：80px；
宽度：80px；
}

---

通过JavaScript将onClick属性添加到span元素（）

HTML

或者

或者将onclick属性直接添加到HTML span元素中

在HTML正文中：

<button id="btn3"><span class="btn3" onclick="myFunction()"></span></button>

在HTML标题中：

<script>
function myFunction() {
    // Your functionality here.
}
</script>

函数myFunction（）{
//你的功能在这里。
}

感谢您的回复。我解决了这个问题，但还是一样的问题。我可以单击图像，当我将鼠标悬停在上面时，指针会出现，但它不会运行该函数。如果有帮助的话，我已经在顶部添加了JS函数。太好了！就像我想的那样！非常感谢。你介意解释一下为什么我的代码不起作用吗。id在按钮2上。假设addEventlistener工作正常，则单击的是跨度

<button id="btn3"><span class="btn3" id="span_in_button"></span></button>

document.getElementById('span_in_button').onclick = function changeContent() {

   // Your functionality here.

}

<button id="btn3"><span class="btn3" onclick="myFunction()"></span></button>

<script>
function myFunction() {
    // Your functionality here.
}
</script>