为何带参数的JavaScript鼠标按下事件函数无法正常工作？

你遇到的问题核心在于事件处理函数的赋值方式错误：

能正常运行的代码逻辑 #

第一个示例中，你把函数的引用直接赋值给onmousedown：

function showSkillInfo() {
    if (skill1Info.style.display === 'none') {
        skill1Info.style.display = 'grid';
    } else {
        skill1Info.style.display = 'none';
    };
};
skill1.onmousedown = showSkillInfo;

这里showSkillInfo后面没有括号，意味着你告诉浏览器：当鼠标按下时，执行这个函数。

无法运行的原因 #

第二个示例中，你直接调用了函数showSkillInfo2(skill1Info)，并把函数的返回值（这里函数没有return，所以是undefined）赋值给了onmousedown：

function showSkillInfo2(skill) {
    if (skill.style.display === 'none') {
        skill.style.display = 'grid'
    } else {
        skill.style.display = 'none'
    };
};
skill1.onmousedown = showSkillInfo2(skill1Info);

这相当于你在页面加载时就执行了一次showSkillInfo2，而鼠标按下时，浏览器只会尝试执行undefined，自然没有任何响应。

正确的复用写法 #

要实现带参数的可复用函数，有几种常用方案：

方案1：用匿名函数包裹调用

function showSkillInfo2(skill) {
    if (skill.style.display === 'none') {
        skill.style.display = 'grid'
    } else {
        skill.style.display = 'none'
    };
};
// 用匿名函数作为事件处理函数，内部调用带参数的目标函数
skill1.onmousedown = function() {
    showSkillInfo2(skill1Info);
};
// 其他元素也可以复用同一个函数
skill2.onmousedown = function() {
    showSkillInfo2(skill2Info);
};

方案2：使用bind()绑定参数

bind()会返回一个新的函数，预先绑定好你需要的参数：

function showSkillInfo2(skill) {
    if (skill.style.display === 'none') {
        skill.style.display = 'grid'
    } else {
        skill.style.display = 'none'
    };
};
// 第一个参数是this指向（这里不需要可以传null），第二个是要绑定的参数
skill1.onmousedown = showSkillInfo2.bind(null, skill1Info);
skill2.onmousedown = showSkillInfo2.bind(null, skill2Info);

方案3：事件委托（更高效的复用方式）

如果有大量技能元素，推荐用事件委托，只给父元素绑定一次事件，通过事件目标判断要操作的元素：

function showSkillInfo(e) {
    // 找到触发事件的技能元素（假设技能元素有.skill类）
    const skillTrigger = e.target.closest('.skill');
    if (!skillTrigger) return;
    
    // 通过自定义属性获取对应的详情元素（比如data-info-id）
    const infoId = skillTrigger.dataset.infoId;
    const skillInfo = document.getElementById(infoId);
    
    if (skillInfo.style.display === 'none') {
        skillInfo.style.display = 'grid';
    } else {
        skillInfo.style.display = 'none';
    }
}

// 给父容器绑定事件，所有子元素的点击都会触发
document.querySelector('.skills-container').onmousedown = showSkillInfo;

对应的HTML结构可以这样写：

<div class="skills-container">
    <div class="skill" data-info-id="skill1Info">技能1</div>
    <div id="skill1Info" style="display: none">技能1的详细信息</div>
    
    <div class="skill" data-info-id="skill2Info">技能2</div>
    <div id="skill2Info" style="display: none">技能2的详细信息</div>
</div>

这种方式不需要给每个元素单独绑定事件，新增技能时也不需要修改JS代码，复用性更强。

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