Question

我正在尝试制作一个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中添加了一个没有检测到任何东西的eventListener。现在我只是让它记录hello以查看函数是否执行，但最终我想调用一个对象方法。

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

Answer 1

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

使用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();
})

将事件侦听器添加到FontAwesome图标

1 个答案: