JS自定义文本图标：ES6点击回调函数不生效问题排查

这个问题我之前也碰到过，核心原因是你用模板字符串绑定点击事件的方式搞错了函数作用域，导致点击时浏览器找不到对应的回调函数。咱们一步步来拆解：

为什么原来的写法不生效？ #

当你用模板字符串插入onclick="${() => { _on_click() }}"时，这段箭头函数会被直接转换成字符串插入到HTML中。最终渲染后的元素onclick属性值其实是：

"() => { _on_click() }"

当用户点击元素时，浏览器会尝试在全局作用域执行这段代码，但_on_click是textIcon函数内部的局部变量，全局作用域根本访问不到它，所以会抛出_on_click is not defined的错误，自然就无法触发回调了。

推荐的解决方案：用DOM API创建元素并绑定事件 #

这种方式完全避开了字符串解析的作用域问题，也是现代前端开发更推荐的写法：

function textIcon(_holder, _icon, _text, _on_click) {
  // 创建text-icon容器元素
  const textIconEl = document.createElement('text-icon');
  
  // 创建icon子元素并设置类名
  const iconEl = document.createElement('icon');
  iconEl.className = _icon;
  
  // 创建text子元素并设置文本
  const textEl = document.createElement('text');
  textEl.textContent = _text;
  
  // 组装元素结构
  textIconEl.appendChild(iconEl);
  textIconEl.appendChild(textEl);
  
  // 绑定点击事件（先判断是否为有效函数）
  if (typeof _on_click === 'function') {
    textIconEl.addEventListener('click', _on_click);
  }
  
  // 将组装好的元素添加到目标容器
  _holder.appendChild(textIconEl);
}

这种写法的优势：

• 避免了作用域冲突，直接绑定函数引用
• 更安全，不会有XSS注入风险（如果_text或_icon包含用户输入的话）
• 代码可读性和可维护性更好

（不推荐）如果非要用模板字符串的方式 #

如果你因为某些原因必须用模板字符串插入HTML，可以把回调函数挂载到全局作用域，然后通过全局引用调用，但这种方式容易造成全局污染，还可能有内存泄漏风险，谨慎使用：

// 全局存储回调，用唯一ID标识
let textIconCallbackId = 0;
window.textIconCallbacks = {};

function textIcon(_holder, _icon, _text, _on_click) {
  const callbackId = `text_icon_${textIconCallbackId++}`;
  // 将回调存入全局对象
  window.textIconCallbacks[callbackId] = _on_click;
  
  _holder.append(`
    <text-icon onclick="window.textIconCallbacks['${callbackId}']()">
      <icon class="${_icon}"></icon>
      <text>${_text}</text>
    </text-icon>
  `);
}

// 注意：当元素被移除时，记得删除对应的全局回调，避免内存泄漏
// 比如：delete window.textIconCallbacks[callbackId];

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