Добрый день! Очень нужна ваша помощь!
На 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('click', this._closeContent);
Но, разумеется, оно не работает...
Как быть, подскажите?