事件监听器只工作一次答案

【问题标题】：Event lisener works only one time事件监听器只工作一次
【发布时间】：2021-01-07 15:52:31
【问题描述】：

当滚动值 >= 500 时，我有一个更改 CSS 的代码：

 var appearScroll = function(){
            let fline = document.getElementById("skills__listone");
            var skills = document.getElementById("skills");
            var baselocation = 0;
            fline.style.opacity = 0;
            var distance = window.pageYOffset;
            window.addEventListener("click", function(){
                if ( distance >= 600 ){
                    fline.style.opacity = 1;
                }
            })
            
            
    
        };
        appearScroll();

这只能工作一次，例如当滚动值为200并且我单击鼠标时，没有任何反应（没关系，因为距离> = 600），但是当滚动值，例如700时，没有任何反应，因为点击功能已经在运行。该函数必须观察距离值并依赖 IT 得出结果

【问题讨论】：

像var distance = window.pageYOffset; 这样的行不会延伸到未来，但是您可以在侦听器函数中简单地使用if (window.pageYOffset > 600)。

标签： javascript html css web dom

【解决方案1】：

var distance = window.pageYOffset; 这一行应该在点击事件函数中，以便在每次点击时获取当前的window.pageYOffset 值。

像这样：

window.addEventListener("click", function(){
   var distance = window.pageYOffset; // <-- here
   if ( distance >= 600 ){
       fline.style.opacity = 1;
   }
})

【讨论】：

你能否补充一下为什么会这样？