Вход

Просмотр полной версии : Как удалить обработчик у определенной части блока


Remi13
19.09.2018, 17:33
Добрый день! Очень нужна ваша помощь!
На html странице имеется структура типа:
<div class="points-content">
<div class="point">... </div>
...
<div class="point">... </div>
</div>

Где каждый блок .point занимает 100% площади родительского блока .points-content и содержит некую статью. Виден на экране только тот, кто имеет дополнительный класс .current, присваивающийся при определенных обстоятельствах. Чтобы он снова перестал быть виден ("закрылась статья") существует JS функция _closeContent, которая привязывается следующим образом:
this.pointsContentWrapper = this.el.querySelector('.points-content');
this.pointsContentWrapper.addEventListener('click' , this._closeContent);
Сделано это для того, чтобы статью можно было закрыть при клике на любую точку внутри блока .points-content - ну мне так надо просто, и все работало хорошо и удобно до этого момента.
В одну из статей понадобилось добавить видео-контент, используя VJS player.
<video id='video1' class="video-js vjs-default-skin"></video>
И разумеется, при нажатии на кнопки play/stop в плеере статья так же закрывается, так как срабатывает вышеописанный обработчик.
Собственно вопрос в том, как сделать так, чтобы он не срабатывал при кликах на ту часть экрана, где находится видео-контейнер, но вокруг него продолжал работать по-старому?
Я пробовала сделать что-то типа:
this.videoContentWrapper = this.el.querySelector('.points-content .point video');
this.videoContentWrapper.removeEventListener('clic k', this._closeContent);
Но, разумеется, оно не работает... :help: Как быть, подскажите?

j0hnik
19.09.2018, 17:42
добавить в функцию обработчик сверху
if(event.target.tagName == 'VIDEO') return.
или обернуть изнутри
if(event.target.tagName !== 'VIDEO'){
//тут код закрывашки
}

Remi13
19.09.2018, 18:18
Спасибо за идею! Не совсем работает, в силу особенностей самого используемого видеоплеера - там, как оказалось, при его запуске еще куча элементов встраивается, потому tagName оказывается то div, то button, то еще что-то, но вот если выкрутиться вот так, то работает: if(event.target.className !== 'vjs-poster' && event.target.className !== 'vjs-tech' && event.target.className !== 'vjs-icon-placeholder')
Только главное тогда "слепых зон" не оставить )))

j0hnik
19.09.2018, 18:25
if(event.target.closest('video')) return;