javascript - 向 FontAwesome 图标添加事件监听器

Question

我目前正在尝试制作面向对象的媒体播放器。一个要求是我制作自定义媒体播放器按钮，而不是使用音频对象中固有的按钮。我已经从 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 中添加了一个不检测任何内容的 eventListener。现在我只是让它记录 hello 以查看函数是否执行，但最终我想调用一个对象方法。

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

Answer 1

将其他人已经在评论中指出的代码放入代码中:

更改 css，使用类而不是 id:

  .clickable {
     cursor:pointer;
  }

或者，正如我个人建议的那样，将光标设为仅用于内部跨度的指针:

.clickable span {
   cursor:pointer;
}

更改您的 javascript，修复缺少的变量 hello 并将 preventdefault 用作函数。

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