父div获焦时点击子按钮失焦问题的解决方法

你的问题核心是点击子按钮时，事件冒泡触发父容器失焦——要么干扰了跳转逻辑，要么父容器的收回动画让按钮瞬间隐藏，导致点击事件无法完整执行。按以下方案修复即可：

1. 阻止按钮点击事件冒泡 #

给按钮的onclick添加event.stopPropagation()，避免点击按钮时事件传递到父容器，既能保留父容器的聚焦状态，也能确保跳转逻辑正常执行：

<button class="portfoliobackbutton" onclick="event.stopPropagation(); window.location='../index.html';">Portfolio</button>

完整修改后的HTML片段 #

<div tabindex="-1" class="portfoliobackcontainer" id="portfoliobackcontainer">
    <button class="portfoliobackbutton" onclick="event.stopPropagation(); window.location='../index.html';">Portfolio</button>
    <div tabindex="-1" class="portfoliobackarrowwrapper" id="portfoliobackarrowwrapper">
        <div class="portfoliobackarrow" id="portfoliobackarrow"></div>
    </div>
</div>

为什么之前的聚焦方法无效？ #

你尝试用JS重新聚焦父容器和箭头元素，但按钮点击时的焦点转移、事件冒泡是同步触发的，等你的聚焦代码执行时，父容器已经失焦，跳转逻辑可能已被动画干扰。阻止冒泡从根源上避免了父容器失焦，无需额外的聚焦操作。

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