Добавление прослушивателя событий к значкам FontAwesome

В настоящее время я пытаюсь создать медиаплеер, который является ООП. Требование состоит в том, что я создаю пользовательские кнопки медиаплеера и не использую те, которые присущи аудио-объекту. Я вытащил иконки из шрифта 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 добавила EventListener, что не обнаруживает что-то. Теперь я просто получаю его, чтобы узнать, выполняет ли функция, но в конечном итоге я хочу вызвать метод объекта.

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

источник

2017-01-17 Meg

Я думаю, что есть Логическая ошибка. 'preventDefault' - это функция, а не свойство, поэтому вы должны называть ее так:' e.preventDefault() '. и я не знаю, есть ли у вас переменная hello или вы хотите напечатать «привет». – Ahmedmoawad

Он работает нормально, но ошибка 'hello не определена', потому что« hello »должен быть заключен в кавычки, чтобы рассматривать его как строку. http://codepen.io/anon/pen/vgyEGw –

PS. ваше определение CSS # clickable' для класса 'id' _not_ a. Вы должны изменить это на '.cickable' – 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

ответ

Смежные вопросы