AddEventListener弹出窗口在IE 11中不起作用

您好,我是javascript新手,我在代码中使用es6。

[基本上,我在IE中遇到addEventListener的问题,这个想法是,当我们单击图像时,会弹出一个窗口,说明它在chrome上有效,但在IE中不起作用。我知道已经有与此相关的主题,例如:addEventListener in Internet Explorer

我尝试实现此功能,但似乎无法正常工作,我想我需要了解更多如何实现与我的代码相关的功能,如果有人可以提供帮助,我将非常感谢。

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=""
                    frameborder="0">
            </iframe>
        </div>
    </div>
回答如下:

AddEventListener弹出窗口在IE 11中不起作用

您好,我是javascript新手,我在代码中使用es6。

[基本上,我在IE中遇到addEventListener的问题,这个想法是,当我们单击图像时,会弹出一个窗口,说明它在chrome上有效,但在IE中不起作用。我知道已经有与此相关的主题,例如:addEventListener in Internet Explorer

我尝试实现此功能,但似乎无法正常工作,我想我需要了解更多如何实现与我的代码相关的功能,如果有人可以提供帮助,我将非常感谢。

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=""
                    frameborder="0">
            </iframe>
        </div>
    </div>
回答如下: