移动端使用addEventListener()点击事件出现异常求助

我开发了一个按钮切换功能，通过添加/移除包含display: none的hide类，实现点击后隐藏一个按钮并显示另一个按钮。该功能在桌面浏览器中运行正常，但在iPhone、平板等移动端设备上出现异常：第二次点击后，按钮看似已执行切换逻辑，但外观并未立即改变，只有点击按钮外部区域后才会更新显示状态。

问题原因 #

iOS Safari的渲染引擎存在优化机制，当使用display: none切换元素显示状态时，可能不会立即触发重排/重绘；同时，被设置为display: none的元素会脱离文档流，容易导致触摸事件状态残留，浏览器会误判该元素无需即时更新渲染。

修复方案 #

方案1：用visibility+opacity替代display:none

修改.hide类的CSS，采用保留文档流的隐藏方式，避免浏览器渲染优化导致的延迟：

.hide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* 确保隐藏元素不接收点击事件 */
  position: absolute; /* 可选，避免占位 */
}

.button-forest, .button-forest-selected {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transition: all 0.1s; /* 可选，添加过渡动画提升体验 */
}

方案2：强制触发浏览器重排/重绘

如果坚持使用display: none，可在切换类后强制浏览器计算布局，触发即时重绘：

const buttonForest = document.querySelector(".button-forest");
const buttonForestSelected = document.querySelector(".button-forest-selected");

function forestButton() {
  buttonForest.classList.remove("hide");
  buttonForestSelected.classList.add("hide");
  // 强制触发重排
  void buttonForest.offsetHeight;
}

function forestButtonSelected() {
  buttonForest.classList.add("hide");
  buttonForestSelected.classList.remove("hide");
  // 强制触发重排
  void buttonForestSelected.offsetHeight;
}

buttonForest.addEventListener("click", forestButtonSelected);
buttonForestSelected.addEventListener("click", forestButton);

方案3：改用事件委托到父容器

将点击事件绑定到父容器，通过判断点击目标执行逻辑，避免隐藏元素的事件监听失效：

const buttonContainer = document.querySelector(".button-container");

buttonContainer.addEventListener("click", function(e) {
  const buttonForest = this.querySelector(".button-forest");
  const buttonForestSelected = this.querySelector(".button-forest-selected");
  
  if (e.target.closest(".button-forest")) {
    buttonForest.classList.add("hide");
    buttonForestSelected.classList.remove("hide");
  } else if (e.target.closest(".button-forest-selected")) {
    buttonForest.classList.remove("hide");
    buttonForestSelected.classList.add("hide");
  }
});

验证建议 #

优先尝试方案1，该方案更适配移动端渲染特性，能避免触摸事件残留等潜在问题，同时可配合过渡动画提升交互体验。

内容的提问来源于stack exchange，提问作者Fábio Szamszoryk