@StepanSnigur

Почему на телефоне не работает e.target?

В мобильной версии сайта не открывались модальные окна. Методом проб я выяснил, что в телефоне почему-то по другому обрабатывается e.target. В мобильной версии чтобы считать атрибут нужно написать e.target.parentElement. Можете, пожалуйста объяснить, почему так происходит. Пока эту проблему я залепил подорожником, но вероятность срабатывания скрипта на телефоне все равно 60-80%.
Вот сам скрипт:
//modal window
let modal = document.getElementById('works-description'),
    closeModal = document.getElementById('close'),
    openElement = document.getElementsByClassName('openingFigure'),
    headline = document.getElementById('headline'),
    taskDescription = document.getElementById('task_description'),
    deadlinesDescription = document.getElementById('deadlines_description'),
    budget = document.getElementById('budget'),
    modalImg = document.getElementById('modal-img'),
    modalHref = document.getElementById('modal-href');
for (let i = 0; i < openElement.length; i++) {
    openElement[i].addEventListener('click', function (e) {

        //заплатка
        let handler = window.screen.width > 768 ? e.target : e.target.parentElement;

        let modalTitle = handler.getAttribute('data-headline'),
            task = handler.getAttribute('data-task'),
            deadline = handler.getAttribute('data-deadline'),
            dataBudget = handler.getAttribute('data-budget'),
            dataImg = handler.getAttribute('data-img'),
            dataHref = handler.getAttribute('data-href');

        modalImg.src = dataImg;
        headline.innerHTML = modalTitle;
        taskDescription.innerHTML = task;
        deadlinesDescription.innerHTML = deadline;
        budget.innerHTML = dataBudget;
        modalHref.href = dataHref;
        modal.style.display = 'flex';
    });
}
closeModal.onclick = function () {
    modal.style.display = 'none';
}

На пк без заплатки все замечательно работало.
Заранее спасибо за помощь.
PS.
Вот html:
<section>
        <div class="container">
            <div id="scroll-myWorks" name="scroll-myWorks" class="my-works-container">
                <h2 class="block-headline">Несколько моих последних работ</h2>
                <div class="p-my-works-container">
                    <p>Кликните на картинку, чтобы посмотреть подробности.</p>
                </div>
            </div>
            <div id="modalButtonsContainer" class="work-cards-container">
                <figure data-img="img/mini-batsam-bg.png" data-headline="Batsam Cofee" data-task="Сделать редизайн страницы" data-deadline="5 дней" data-budget="5" data-href="http://coffee.podarok.click/" class="openingFigure wow fadeInLeft batsam-figure">
                    <figcaption>
                        <h2>Batsam</h2>
                        <p>Дизайн, верстка</p>
                    </figcaption>
                </figure>
                <figure data-img="img/moroz-bg.png" data-headline="Сайт Деда Мороза" data-task="Сделать частичный редизайн страницы" data-deadline="1 день" data-budget="1" data-href="https://www.moroz.club/" class="openingFigure wow fadeInUp moroz-figure">
                    <figcaption>
                        <h2>Сайт Деда Мороза</h2>
                        <p>Верстка</p>
                    </figcaption>
                </figure>
                <figure data-img="img/obogrevatel-bg.png" data-headline="Obogrevatel.ru" data-task="Верстка карточки товара и натяжка на интернет-магазин" data-deadline="3 дня" data-budget="1.5" data-href="https://obogrevatel-ua.com/" class="openingFigure wow fadeInRight obogrevatel-figure">
                    <figcaption>
                        <h2>Карточка товара</h2>
                        <p>Верстка, натяжка</p>
                    </figcaption>
                </figure>
                <figure data-img="img/wooder-bg.png" data-headline="WOODER.ru" data-task="Верстка сайта по PSD макету" data-deadline="2 дня" data-budget="5" data-href="https://snigur-stepan.000webhostapp.com/" class="openingFigure wow fadeInUp wooder-figure">
                    <figcaption>
                        <h2>Магазин мебели</h2>
                        <p>Верстка по PSD макету</p>
                    </figcaption>
                </figure>
            </div>
            <!--modal window-->
            <div id="works-description" class="fade">
                <div class="works-description-block">
                    <a id="close">&#10006;</a>
                    <div class="img-block">
                        <img src="img/" id="modal-img" alt="image">
                    </div>
                    <div class="works-description-text">
                        <h2 id="headline">Site name</h2>
                        <h3>Задача</h3>
                        <p id="task_description"></p>
                        <h3>Сроки</h3>
                        <p id="deadlines_description"></p>
                        <h3>Бюджет: <span id="budget"></span> тыс. рублей</h3>
                        <a id="modal-href" href="https://obogrevatel-ua.com/" target="_blank">Перейти на сайт</a>
                    </div>
                </div>
            </div>
            <!--/modal window-->
        </div>
    </section>
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
@StepanSnigur Автор вопроса
Решил проблему просто переписав скрипт на jquery
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы