Javascript 防止窗口滚动上的var值(选定选项)更改

Javascript 防止窗口滚动上的var值(选定选项)更改,javascript,scroll,onchange,addeventlistener,Javascript,Scroll,Onchange,Addeventlistener,获取所选选项值并将其传递给函数。但是,请注意,在窗口上滚动值更改并返回所有以前选择的值 请参阅 检查控制台 复制问题 在下拉列表中,选择2018并滚动。在控制台中,返回预期行为 清理控制台。切换到2019并滚动。在控制台中,返回“2018”“2019”的循环。预期行为仅为“2019年” 关于此评论: 如何将所选值从更改处理程序传递到滚动处理程序? 只需在“更改”事件侦听器中获取所选值 不是bug,您没有清除以前的滚动侦听器。您确实应该有一个侦听器。当您使用一个事件处理程序在其他元素上创建事件侦听

获取所选选项值并将其传递给函数。但是,请注意,在窗口上滚动值更改并返回所有以前选择的值

请参阅 检查控制台

复制问题

  • 在下拉列表中,选择2018并滚动。在控制台中,返回预期行为
  • 清理控制台。切换到2019并滚动。在控制台中,返回“2018”“2019”的循环。预期行为仅为“2019年”

  • 关于此评论:


    如何将所选值从更改处理程序传递到滚动处理程序?

    只需在“更改”事件侦听器中获取所选值


    不是bug,您没有清除以前的
    滚动
    侦听器。您确实应该有一个侦听器。当您使用一个事件处理程序在其他元素上创建事件侦听器时,会遇到这些问题。一般来说,这是一种不好的做法。
    的每次更改都会添加一个新的滚动侦听器如何将所选值从更改处理程序传递到滚动处理程序?您实际上不需要这样做。您可以使用滚动手柄中的
    select.value
    来确认!我实际上可以在滚动侦听器中使用select[select.selectedIndex].value。谢谢,谢谢。作品你能解释一下为什么var yearSelected=-1吗?Hi Shiro,意思是初始化一个未选择的年份,所以你不需要比较未定义的/null这个值,只需要比较这个值
    "change: 2018"
    "init: 2018"
    "scroll: 2018"
    
    "change: 2019"
    "init: 2019"
    "scroll: 2018"
    "scroll: 2019"
    "scroll: 2018"
    "scroll: 2019"
    
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        var select = document.querySelector('select')
    
        // Register click event listener for select element
        select.addEventListener('change', handleLibsynSelectChange, true)
    
        // Handle select change
        function handleLibsynSelectChange(e) {
          var year = e.target.value
          console.log('change: ' + year)
          handleLibsynInit(year)
        }
    
        function handleLibsynInit(libsynFilterYear) {
          console.log('init: ' + libsynFilterYear)
          window.addEventListener('scroll', function() {
            console.log('scroll: ' + libsynFilterYear)
            // other functions to execute on window scroll which need the var libsynFilterYear
          })
        }
      })
    })()
    
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        var select = document.querySelector('select');
        var yearSelected = -1;
        // Register click event listener for select element
        select.addEventListener('change', handleLibsynSelectChange, true);
        // Handle select change
        function handleLibsynSelectChange(e) {
          yearSelected = e.target.value
        };
        var listener = function () {
          console.dir('scroll : ' + yearSelected);
        };
        window.addEventListener('scroll',listener);
      });
    })()