如何用JavaScript实现pointer-events:none等效效果？解决边框抖动问题

你遇到的抖动问题本质是：动态生成的.border-bottom元素会接收鼠标事件，当鼠标移到它上方时，会触发父元素.top-link的mouseleave事件，进而反复触发mouseenter和mouseleave，形成抖动循环。

模拟pointer-events:none的JS实现 #

最直接的方式就是在创建.border-bottom元素时，通过JS给它设置pointerEvents: 'none'，完全复刻CSS的pointer-events:none效果——让这个元素不接收任何鼠标事件，鼠标移动到它上面时，事件仍会作用在父元素.top-link上，不会触发不必要的mouseleave。

优化后的完整代码 #

HTML（保持原有结构）

<a class="top-link">
 <span class="title"> Title </span>
</a>

CSS（补全父元素定位，优化过渡逻辑）

.top-link {
  position: relative; /* 让绝对定位的子元素以父元素为参考 */
  display: inline-block; /* 让父元素宽度匹配内容，避免边框宽度异常 */
}
.border-bottom {
  border-bottom: solid 3px #ddd;
  width: 100%;
  position: absolute;
  top: 100%;
  z-index: 1;
  left: 0;
  transform: translateY(4px);
  transition: transform 0.2s ease-in, opacity 0.2s ease-in; /* 明确过渡属性，提升性能 */
  opacity: 0;
}

JavaScript（优化事件逻辑，添加pointer-events设置）

document.querySelectorAll(".top-link").forEach((el) => {
  el.addEventListener("mouseenter", function () {
    // 避免重复创建边框元素
    if (!this.querySelector(".border-bottom")) {
      const borderEl = document.createElement('span');
      borderEl.className = 'border-bottom';
      // 模拟pointer-events:none效果
      borderEl.style.pointerEvents = 'none';
      this.appendChild(borderEl);

      // 用requestAnimationFrame替代setTimeout，动画触发更精准
      requestAnimationFrame(() => {
        borderEl.style.transform = "translateY(0px)";
        borderEl.style.opacity = "1";
      });
    }
  });

  el.addEventListener("mouseleave", function () {
    const borderEl = this.querySelector(".border-bottom");
    if (borderEl) {
      // 触发退出动画
      borderEl.style.transform = "translateY(4px)";
      borderEl.style.opacity = "0";

      // 动画结束后再移除元素，替代多个setTimeout，避免时间差问题
      const handleTransitionEnd = () => {
        borderEl.remove();
        borderEl.removeEventListener('transitionend', handleTransitionEnd);
      };
      borderEl.addEventListener('transitionend', handleTransitionEnd);
    }
  });
});

关键优化说明 #

1. 给父元素添加position: relative和display: inline-block，确保绝对定位的边框元素布局正确。
2. 避免重复创建边框元素，防止多次快速 hover 导致的元素堆积。
3. 用requestAnimationFrame替代setTimeout，动画触发时机更贴合浏览器渲染周期，减少抖动可能。
4. 用transitionend事件监听动画结束，替代多个时间不确定的setTimeout，逻辑更可靠。

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