將事件監聽器添加到FontAwesome圖標

我目前正在嘗試製作OOP的媒體播放器。一個要求是我製作自定義媒體播放器按鈕，而不是使用音頻對象中固有的那些按鈕。我從Font Awesome中抽出了圖標，並且無法給予他們eventlisteners。將事件監聽器添加到FontAwesome圖標

我把圖標變成所謂的跨度類可點擊

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

來源

2017-01-17 Meg

我覺得有一個邏輯錯誤。 'preventDefault'是一個函數而不是屬性，那麼你應該像'e.preventDefault（）'那樣調用它。我不知道你是否有'hello'變量或者你想打印「hello」。 – Ahmedmoawad

它工作正常，但錯誤'hello沒有定義'，因爲「hello」應該用引號包裹來將其視爲字符串。 http://codepen.io/anon/pen/vgyEGw –

PS。你的'＃clickable' CSS定義是爲'id' _not_一個類。你應該把它改成'.clickable' – haxxxton

擺在代碼什麼其他人已經在評論中指出：

更改CSS，使用類而不是ID：

.clickable { 
    cursor:pointer; 
    }

，或者我個人建議，使光標指針只用於跨度裏面：

.clickable span { 
    cursor:pointer; 
}

更改您的JavaScript，修復缺少的變量你好，並使用preventdefault作爲一個功能。

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

來源

2017-01-17 01:29:39

將事件監聽器添加到FontAwesome圖標

回答

相關問題