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

【问题标题】：AddEventListener pop up doesn't work in IE 11AddEventListener 弹出窗口在 IE 11 中不起作用
【发布时间】：2020-04-29 18:10:44
【问题描述】：

您好，我是 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="https://www.youtube.com/embed/TA6blZJ6nVw"
                    frameborder="0">
            </iframe>
        </div>
    </div>

【问题讨论】：

标签： javascript

【解决方案1】：

没有任何版本的 Internet Explorer 支持箭头功能。除了const 和let 之外，所有 ES6 Javascript 功能也是如此。

所以这在 any 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')
    }
})

改为使用 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')
    }
})

下一个问题是没有任何版本的 Internet Explorer 支持HTMLElement.prototype.closest()。如果你想使用它，你需要对其进行 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;
  };
}

【讨论】：

谢谢你的回答，现在我明白了它是如何工作的，我很感激，抱歉我才有机会回答

【解决方案2】：

它问你三件事事件、元素、函数

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')
        }
}

然后将所有内容传递给函数

addEvent(event, element, myFunc);

【讨论】：