多次执行函数
多次执行函数
提问于 2017-12-30 01:21:11
我不能让下面的代码正常工作。不幸的是，谷歌并没有帮上忙。
我想要的是该函数立即执行，然后在所有内容加载后再次执行(对于移动Chrome中的数据保存选项似乎更安全)，并在任何时候调整窗口大小。
我极大地减少了代码，所以很容易看到发生了什么，而代码基本上仍然在做它应该做的事情。
但是例如，classList.toggle不能在火狐和Chrome中工作，它没有给这个类，只给了一个空的类属性。IE 11给出了正确的类。
谢谢你的任何提示！
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Test</title>
<style>
* {
margin: 0;
padding: 20px;
border: none;
}
p {
color: black;
}
body.state-2 p {
color: red;
}
h2 {
position: static;
}
@media only screen and (max-width: 1250px) {
h2 {
position: relative;
}
}
</style>
<body>
<h2>Headline</h2>
<p>Hello</p>
<script>
function toggleState()
{
var toggle = document.querySelector('h2');
var container = document.querySelector('body');
if (window.getComputedStyle(toggle,null).getPropertyValue('position') == 'relative')
{
toggle.setAttribute('role', 'button');
}
else
{
toggle.removeAttribute('role');
}
toggle.addEventListener('click', function()
{
container.classList.toggle('state-2');
}
);
}
toggleState();
window.onload = toggleState;
window.onresize = toggleState;
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-30 02:15:00
似乎您在每次调整大小事件时都会添加一个新的侦听器：
toggle.addEventListener('click', function(){...});你也会一次又一次地发现这些元素：
var toggle = document.querySelector('h2');
var container = document.querySelector('body');您可以使用闭包来解决这两个问题：
function toggleState(toggle) {
if (window.getComputedStyle(toggle, null).getPropertyValue('position') == 'relative') {
toggle.setAttribute('role', 'button');
}
else {
toggle.removeAttribute('role');
}
}
function setup() {
var toggle = document.querySelector('h2');
var container = document.querySelector('body');
toggle.addEventListener('click', function () {
container.classList.toggle('state-2');
});
window.addEventListener('load', function() { toggleState(toggle) });
window.addEventListener('resize', function() { toggleState(toggle) });
}
setup();通过这种方式，侦听器只创建一次，对元素的引用保存在setup函数内的一个局部变量中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48026102
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号