Этот код JS не работает в мобильных браузерах (onclick)
Дамы и господа, подскажите ибо сбился я. Сайт-webприложение, на нем есть 4 вкладки, на каждую вкладку повешано событие onclick. все летает и на desktop'e и на мобильном tap'ая - идет переключение по вкладкам. Фрагмент кода:
tab_1.onclick = f1;
tab_2.onclick = f2;
tab_3.onclick = f3;
function f1(){
localStorage.setItem('tab', 1);
field_1.style.display = 'block';
field_2.style.display = 'none';
field_3.style.display = 'none';
};
В одной из вкладок список из блоков, ожидая что кликнув на один из, блок развернется и станет доступно видео, так все отлично работает на desktop'е, но на смартофне ни в какую
wrapper.onclick = click;
function click(event) {
if (event.target.classList.contains('video_paragraph')) {
if (!event.path[1].children[1].classList.contains("opened_video")) {
event.path[1].children[1].classList.add("opened_video");
}
else {
event.path[1].children[1].classList.remove("opened_video");
}
}
}
Просветите гуру, может что то чем то можно заменить, дабы добиться желаемого, на мой взгляд две идентичные технологии, но не работает одна из них..
UPD:
прикрепляю HTML
<div class="sports_day_wrappper<?=$extra_class?> <?=$active_day?>">
<p class="video_paragraph"><?=$one_day[0]?></p>
<iframe width="300" height="170" src="<?=$one_day[1]?>" title="111" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
UPD n SUCCESS
Умные люди подсказали, что метод которым я решал event.path[1] не является стандартным, и вместо него следует применять composedPath()
Таким образом решение, которое мне помогла выглядит так:
wrapper.onclick = click;
function click(MouseEvent) {
if (MouseEvent.composedPath()[0].classList.contains('video_paragraph')) {
if (!MouseEvent.composedPath()[1].children[1].classList.contains("opened_video")) {
MouseEvent.composedPath()[1].children[1].classList.add("opened_video");
}
else {
MouseEvent.composedPath()[1].children[1].classList.remove("opened_video");
}
}
}
Ответы (1 шт):
event.path является нестандартным, не во всех браузерах поддерживается.
Рекомендуется использовать https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
ну или проверять его наличие
const path = event.path || (event.composedPath && event.composedPath());