JS click事件触发但无法切换动态创建section可见性问题排查

云上老周

2026-8-28

问题现象

实现目标：通过两个h2元素切换名为newHexagon的section可见性
- 位于section外部、id为creaServizi的seeHexagon元素点击后，将section设为可见
- 位于section内部、id为chiudiServizi的hideHexagon元素点击后，将section设为隐藏
异常表现：页面初始加载时section的visibility属性为hidden，点击seeHexagon可正常将其修改为visible；点击hideHexagon时控制台可正常打印clicked日志，但修改visibility为hidden的代码不生效，section无法隐藏
已尝试操作：将hideHexagon的事件监听器移到seeHexagon点击回调外部，问题未解决；相同逻辑的测试demo可正常运行，放到自己的EJS渲染页面就失效
补充场景：hideHexagon不是页面初始加载就存在的DOM，是通过JS动态创建section后，通过innerHTML插入到section内部的元素

原问题实现代码：

// retrieve element that when clicked fires the click event
const seeHexagon = document.getElementById('creaServizi');

// extract necessary html from a data attribute of body
const htmlServices = document.body.getAttribute("data-esagonoServizi");

// select the node to which append the new section
const servicesSide = document.querySelector('.terzaRigaDes');

// create the new section with visibility hidden
const newHexagon = document.createElement('section');
newHexagon.setAttribute('class', 'esagono esagonoServizi');
newHexagon.setAttribute('id', 'sezioneServizi');
newHexagon.style.visibility = 'hidden';

// fill the new section with html extracted above
newHexagon.innerHTML = htmlServices;

// append the new section to the selected node
servicesSide.appendChild(newHexagon);

// now that the section is present, retrieve the element that when clicked must fire the second click event
let hideHexagon = document.getElementById('chiudiServizi');

// add listener for click event to element that sets the new section's visibility to visible
seeHexagon.addEventListener('click', function () {
  newHexagon.style.visibility = 'visible';
  hideHexagon.addEventListener('click', function () {
    console.log('clicked'); // EVERYTHING WORKS UP TO THIS LINE INCLUDED
    // NEXT LINE IS INEFFECTIVE AND THAT'S THE PROBLEM
    newHexagon.style.visibility = 'hidden';
  });
});

问题根因

事件绑定逻辑错误：原代码将hideHexagon的点击事件绑定写在seeHexagon的点击回调内部，每点击一次seeHexagon就会给hideHexagon新增一个重复的点击监听器，多次点击后监听器堆积，会导致逻辑执行顺序混乱。
动态元素绑定方式有风险：hideHexagon是通过innerHTML动态插入的元素，如果后续存在重写newHexagon.innerHTML的逻辑，之前获取的hideHexagon元素引用会和实际渲染的DOM节点脱节，即便能触发点击日志，也可能出现操作对象不匹配的问题。
事件冒泡或样式优先级干扰：点击hideHexagon时事件向上冒泡，触发了其他节点上绑定的、将newHexagon设为可见的逻辑，刚设置的hidden立刻被改回；或者存在带!important的高优先级CSS规则覆盖了内联样式，导致直接修改内联style的代码无法生效。
该问题和EJS模板引擎无关：EJS只负责服务端拼接输出HTML字符串，不会干预浏览器端原生JS的DOM操作逻辑，不需要在模板渲染层面排查问题。

修复方案

拆分两个元素的事件绑定逻辑，不要在seeHexagon的点击回调里绑定hideHexagon的事件，避免重复绑定。
对动态生成的hideHexagon使用事件委托，将点击事件绑定到页面加载时就已存在的父节点newHexagon上，不需要提前获取动态元素的引用，也不会受后续innerHTML重写的影响。
在两个点击回调里添加事件冒泡阻止逻辑，避免点击事件向上传递触发其他无关逻辑。

修复后可直接使用的代码：

const seeHexagon = document.getElementById('creaServizi');
const htmlServices = document.body.getAttribute("data-esagonoServizi");
const servicesSide = document.querySelector('.terzaRigaDes');

// 创建并初始化newHexagon节点
const newHexagon = document.createElement('section');
newHexagon.className = 'esagono esagonoServizi';
newHexagon.id = 'sezioneServizi';
newHexagon.style.visibility = 'hidden';
newHexagon.innerHTML = htmlServices;
servicesSide.appendChild(newHexagon);

// 绑定显示逻辑
seeHexagon.addEventListener('click', (e) => {
  e.stopPropagation();
  newHexagon.style.visibility = 'visible';
});

// 用事件委托绑定隐藏逻辑，直接绑在已存在的父节点上
newHexagon.addEventListener('click', (e) => {
  // 校验点击的是否为目标隐藏按钮
  if (e.target.id === 'chiudiServizi') {
    console.log('clicked');
    e.stopPropagation();
    newHexagon.style.visibility = 'hidden';
  }
});

额外排查项

如果使用上述代码后问题仍存在，按以下步骤排查：

在设置newHexagon.style.visibility = 'hidden'的代码下新增日志console.log('内联样式值：', newHexagon.style.visibility, '浏览器计算后样式值：', getComputedStyle(newHexagon).visibility)，如果执行完代码后内联样式已经是hidden但计算后样式还是visible，说明存在带!important的高优先级CSS规则覆盖了内联样式，此时建议改用class切换的方式控制可见性：在CSS中定义.hidden { visibility: hidden !important; }，隐藏时执行newHexagon.classList.add('hidden')，显示时执行newHexagon.classList.remove('hidden')即可。
全局搜索项目中所有修改sezioneServizi节点可见性的代码，确认是否存在其他逻辑在点击事件触发后将节点重新设为可见。

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