JavaScript闭包：如何调用handleMouseDown返回的匿名函数

现有代码的问题根因 #

• 事件绑定方式错位：如果你的绑定代码是类似selectEl.addEventListener('mousedown', handleMouseDown)的写法，每次触发mousedown时，都会直接执行外层handleMouseDown，生成的内部匿名函数没有被复用，执行完就被丢弃，自然跑不起来你写的计数、触发myFunction的逻辑。
• 闭包捕获逻辑被破坏：内部返回的匿名函数形参写了和外层变量同名的whichDropDown、mouseDownCount，这会让原本靠闭包持久保存的外层状态，被函数局部的形参值覆盖——实际触发时形参拿到的是事件对象和undefined，根本走不对计数分支。
• 状态污染全局：原代码判断mouseDownCount未定义就赋值的写法，会把计数变量挂到全局作用域，多个下拉列表绑定同类逻辑时会出现计数互相干扰的问题。

正确的调用与实现方案 #

你要拿到并调用外层handleMouseDown()返回的匿名函数，只需要按这个步骤操作：

1. 手动执行一次外层函数，拿到返回的闭包实例
   外层函数的设计目的是生成带着持久计数状态的内部处理函数，你需要先调用一次外层函数，传入目标下拉列表的DOM引用，把返回的内部匿名函数存在当前作用域可访问的变量里：

   // 传入目标select元素，生成带状态的闭包
   const dropdownMousedownHandler = handleMouseDown(yourSelectElement);
   

2. 两种场景下的使用方式
   • 绑定事件时，直接把存好的闭包函数作为事件回调传入即可，不需要额外加括号：

     yourSelectElement.addEventListener('mousedown', dropdownMousedownHandler)
     

   • 其他代码位置需要触发这套逻辑时，直接调用dropdownMousedownHandler()就行——这就是你要找的、调用外层返回的匿名函数的语句，不需要重复执行外层handleMouseDown。
3. 修正后的可用代码
   调整原代码中破坏闭包的形参问题，把计数变量改为外层函数的局部持久变量，避免全局污染：

   function handleMouseDown(whichDropDown) {
       // 计数变量定义为外层函数的局部变量，仅被内部闭包捕获
       let mouseDownCount = 0;
       // 返回的内部函数不再重复声明同名形参，直接读取外层作用域的状态
       return function() {
           switch (mouseDownCount) {
               case 0:
                   mouseDownCount++;
                   break;
               case 1:
                   mouseDownCount++;
                   myFunction(whichDropDown);
                   break;
               // 计数到2之后重置，避免状态累计异常
               default:
                   mouseDownCount = 0;
                   break;
           }
           return mouseDownCount;
       }
   }
   

避坑提醒 #

• 不要为了图方便在事件绑定时直接写addEventListener('mousedown', handleMouseDown())：这种写法会在页面加载时立即执行一次外层函数，虽然最终也能把内部函数绑到事件上，但如果外层函数有额外执行逻辑，会导致逻辑提前触发、出现预期外的副作用。
• 闭包内部如果需要使用外层的状态变量，不要在内部函数的形参里声明同名变量，否则会直接覆盖闭包的捕获逻辑，导致状态永远没法持久累计。

内容的提问来源于stack exchange，提问作者Vahe