Bonjour, je suis nouveau sur javascript, j'utilise es6 pour mon code.

Fondamentalement, j'ai un problème avec IE pour addEventListener, l'idée, lorsque nous cliquons sur l'image, une fenêtre contextuelle apparaît, cela fonctionne sur chrome, mais cela ne fonctionne pas dans IE. Je sais qu'il existe déjà un sujet connexe à ce sujet, par exemple: addEventListener dans Internet Explorer

J'ai essayé de l'implémenter, mais cela ne semble pas fonctionner, je pense que j'ai besoin de mieux comprendre comment l'implémenter en fonction de mon code, si quelqu'un peut aider, j'apprécierai vraiment cela.

const toggleButton = document.querySelector('.jsModalToggle');
    const container = document.querySelector('.modal-yt-container');

    toggleButton.addEventListener('click', _ => {
        document.body.classList.add('modal-yt-is-open')
    })

    container.addEventListener('click', e => {
        if (!e.target.closest('.modal-yt-video')) {
            document.body.classList.remove('modal-yt-is-open')
        }
    })
 .installation-video-callout-text-container {
            padding: 20px;
        }

        .installation-video-callout-text p{
            font-size: 1em;
            line-height: 16px;
        }

        .installation-video-callout-text .green_btn{
            margin: 20px 0 0px 0;
        }

        .installation-video-callout-text h2{
            line-height: 45px;
            font-size: 32px;
        }

        .installation-video-callout-img iframe{
            height: 300px;
        }
 
 
 .modal-yt-container {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.78);
    }

    .modal-yt-is-open .modal-yt-container {
        z-index: 9999;
        opacity: 1;
    }

    .modal-yt-video{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45%;
    }
<img class="jsModalToggle installation-video-callout-img" src="image" style="cursor:pointer">image click</img>

<div class="modal-yt-container installation-video-callout-img">
        <div class="modal-yt-video">
            <iframe type="text/html"
                    width="100%"
                    height="500px"
                    src="https://www.youtube.com/embed/TA6blZJ6nVw"
                    frameborder="0">
            </iframe>
        </div>
    </div>
0
Udzzzz 29 avril 2020 à 21:10

2 réponses

Meilleure réponse

Aucune version d'Internet Explorer ne prend en charge les fonctions fléchées. Il en va de même pour toutes les fonctionnalités Javascript ES6 sauf const et let.

Cela ne fonctionnera donc pas dans aucun IE:

toggleButton.addEventListener('click', _ => {
    document.body.classList.add('modal-yt-is-open')
})

container.addEventListener('click', e => {
    if (!e.target.closest('.modal-yt-video')) {
        document.body.classList.remove('modal-yt-is-open')
    }
})

À la place, utilisez les fonctions ES5:

toggleButton.addEventListener('click', function(_) {
    document.body.classList.add('modal-yt-is-open')
})

container.addEventListener('click', function(e) {
    if (!e.target.closest('.modal-yt-video')) {
        document.body.classList.remove('modal-yt-is-open')
    }
})

Le problème suivant est qu'aucune version d'Internet Explorer ne prend en charge HTMLElement.prototype.closest() non plus. Si vous souhaitez l'utiliser, vous devez le polyfill:

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || 
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
1
connexo 29 avril 2020 à 18:41

Il vous demande 3 choses événement, élément, fonction

var event = "click"
var element = document.querySelector('.jsModalToggle');
var myFunc = function(e){

        if (!e.target.closest('.modal-yt-video')) {
            document.body.classList.remove('modal-yt-is-open')
        }
}

Alors tu passes tout à la fonction

addEvent(event, element, myFunc);
0
Oscar Rendón 29 avril 2020 à 18:38