javascript - AddEventListener 弹出窗口在 IE 11 中不起作用
问题描述
您好,我是 javascript 新手,我在代码中使用 es6。
基本上,我在 IE 中遇到了 addEventListener 的问题,这个想法是,当我们单击图像时,会出现弹出窗口,它在 chrome 上工作,但在 IE 中不起作用。我知道已经有关于这个的相关主题,例如:Internet Explorer 中的 addEventListener
我试图实现这个,但它似乎不起作用,我想我需要更多地了解如何实现它与我的代码相关,如果有人可以提供帮助,我将非常感激。
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>
解决方案
没有任何版本的 Internet Explorer 支持箭头功能。除和之外的所有ES6 Javascript 功能也是如此。const
let
所以这在任何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;
};
}
推荐阅读
- javascript - 使用“npm start”命令反应应用程序问题
- html - 如何将组件放置到 Angular 9 中父组件结构中的特定位置?
- javascript - 单击HTML表格列以在Javascript中进行排序时如何显示向上/向下箭头
- python - 启动我的 Django 服务器时出错
- python - 将 df.loc 除以具有 NaN 值的 df.loc;错误“str”/“str”
- spring-boot - 带有 testcontainers 和 jOOQ 的 Spring Boot 不会注入 DSL 上下文
- c++ - C ++声明双链表,使用两个for循环双向遍历列表并打印
- kubernetes - 通过 Ansible 将多个 Kubectl 命令传递给 Pod
- java - 类型参数 T 具有不兼容的上限:Views 和 MessageList 错误
- java - 如何读取不同文件夹中的 Csv 文件