javascript - 将事件监听器添加到Font Awesome图标

我目前正在尝试制作一个OOP的媒体播放器。要求是我制作自定义媒体播放器按钮，而不使用音频对象中固有的按钮。我已经从Font Awesome中提取了图标，但无法给它们提供事件监听器。

我将图标放入了一个名为clickable的span类中

<span class="clickable">
<span class="fa fa-backward fa-4x fa-fw" aria-hidden="true" id="Back"></span>
<span class="fa fa-pause fa-4x fa-fw" aria-hidden="true" id="Pause"></span>
<span class="fa fa-play fa-4x fa-fw" aria-hidden="true" id="Play"></span>
<span class="fa fa-forward fa-4x fa-fw" aria-hidden="true" id="Forward"></span>
</span>

然后在CSS中，使#clickable类可点击

  #clickable {
  cursor:pointer;
  }

然后在JS中添加了一个事件监听器，该事件监听器什么也没检测到。

document.getElementById('Back').addEventListener("click",
function(e){
  e.preventDefault
  console.log(hello);
  // myPlaylist.play();
})

最佳答案

将其他人已经在注释中指出的内容放入代码中：

使用class而不是id更改css：

  .clickable {
     cursor:pointer;
  }

或者，正如我个人建议的那样，将光标仅作为内部范围的指针：

.clickable span {
   cursor:pointer;
}

更改您的JavaScript，修复缺少的变量hello并使用preventdefault作为函数。

document.getElementById('Back').addEventListener("click",
function(e){
  e.preventDefault()
  console.log('hello');
  // myPlaylist.play();
})

关于javascript - 将事件监听器添加到Font Awesome图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41687035/