如何在跨度按钮内使图像可点击？

Question

我正在尝试在可点击的按钮内创建一个跨度。 跨度中有一个 .png 图像。 它只会在我单击实际图像时充当按钮，但在我单击图像本身时不会。 我找不到与我的问题直接相关的任何解决方案。

HTML

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

CSS

span.btn3 {
    background: url("./images/raincloud.png") no-repeat top left;
    background-size: contain;
    cursor: pointer;
    display: inline-block;
    height: 80px;
    width: 80px;
}

编辑：

这是JS function。 它旨在在单击某个按钮时更改音频/视频文件。

[].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;
    }
  })
})

Answer 1

• 缺少=在class="btn3"

• 您想要目标父级的 ID

• 你的 forEach 不是很有说服力。 我从最近的容器委托

 const audio = document.getElementById("audio"); const video = document.getElementById("video"); document.getElementById("container").addEventListener("click", function(e) { var tgt = e.target; if (tgt.tagName == "SPAN") { var id = tgt.closest("button").id; console.log(id) switch (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; } } })

 span.btn3 { background: url(https://img.icons8.com/cotton/2x/cloud.png) no-repeat top left; background-size: contain; cursor: pointer; display: inline-block; height: 80px; width: 80px; }

 <div id="container"> <button id="btn3"><span class="btn3"></span></button> <button id="btn3"><span class="btn3"></span></button> <button id="btn4"><span class="btn3"></span></button> <button id="btn5"><span class="btn3"></span></button> </div> <audio id="audio" /> <video id="video" />

Answer 2

通过 JavaScript 将 onClick 属性添加到 span 元素（ https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandler ）

HTML

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

JavaScript

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

   // Your functionality here.

}

或通过https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

或将 onclick 属性直接添加到 HTML 跨度元素https://www.w3schools.com/TAgs/att_onclick.asp

在 HTML 主体中：

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

在 HTML 头中：

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