如何在JavaScript中编写带参数函数，为不同area元素绑定不同位置弹窗？

步骤1：重构重复的弹窗函数 #

把两个逻辑重复仅位置偏移不同的函数合并成一个带参数的通用函数，通过传入top和left的偏移量来控制弹窗位置：

// 通用弹窗函数，接受top和left的偏移量参数
function openBubble(topOffset, leftOffset) {
  // 用闭包保留偏移参数，作为事件回调返回
  return function(event) {
    const content = myData[this.id];
    bubbleContent.innerHTML = `<h3>${content.title}</h3>
                              <img src="${content.image}" alt="" />
                              <p>${content.description}</p>`;
    bubble.style.top = `${event.clientY + topOffset}px`;                        
    bubble.style.left = `${event.clientX + leftOffset}px`;                        
    bubble.className = 'shown';
  }
}

这里用模板字符串替代了字符串拼接，提升代码可读性；同时将event作为参数传入，避免依赖全局变量。

步骤2：给对应area元素绑定函数 #

获取页面上的area元素，分别绑定带不同偏移参数的弹窗函数：

// 获取区域元素
const leftEye = document.getElementById('left-eye');
const mouth = document.getElementById('mouth');

// 给左眼区域绑定左侧弹窗（偏移量：top-20，left-200）
leftEye.addEventListener('click', openBubble(-20, -200));

// 给嘴巴区域绑定右侧弹窗（偏移量：top+20，left+200）
mouth.addEventListener('click', openBubble(20, 200));

如果习惯用传统的onclick绑定，也可以这样写：

document.getElementById('left-eye').onclick = openBubble(-20, -200);
document.getElementById('mouth').onclick = openBubble(20, 200);

这样修改后，既解决了代码重复的问题，也能精准控制不同区域弹窗的显示位置，后续如果需要新增其他位置的弹窗，只需要传入对应的偏移量即可。

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