如何修复在父div聚焦时单击子按钮时父div不聚焦的问题

Question

我有一个公文包网站，上面展示了我的一些项目，我正试图在项目页面中制作一个按钮，当用户点击时，该按钮会将用户返回到公文包页面。我唯一的问题是，当我尝试单击子按钮而不是将用户引导到公文包页面时，父div元素会失去焦点。如何使父div在单击子按钮时不再失去焦点？我尝试过在javascript中聚焦按钮元素，但这似乎没有什么区别。

document.getElementById('portfoliobackarrowwrapper').onclick = function () {
document.getElementById('portfoliobackcontainer').focus();
document.getElementById('portfoliobackarrow').focus();
};

div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px; 
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}

button.portfoliobackbutton {
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif; 
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainer:focus {
animation-fill-mode: forwards 
}
div.portfoliobackcontainer:focus div.portfoliobackarrow{
animation-fill-mode: forwards;
}
@keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
@keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}

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

Answer 1

除了您遇到的问题外，您的代码还需要重新编写，可能不是现在，而是将来获得更多经验后。

让我给你一些关于改进你的代码的提示：

1. 不能聚焦2个元素，否则前一个元素会失去焦点
2. 重定向到另一个页面时，请使用锚标记a和button进行其他交互
3. 与其把重点放在元素上，为什么不给它一个特定任务的类呢
4. 尝试改进您的类，使其在没有标记名(如仅div.class到.class(的情况下工作。这可能会打破你现在的风格，但要把它当作建议
5. 类采用BEM命名系统，看起来很乱

所以现在，使用这个解决方案：

将JavaScript代码替换为：

const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})

并且在CSS文件中将类div.portfoliobackcontainer:focus替换为div.portfoliobackcontainerfocused

请参阅此处的完整代码：

const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})

div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px; 
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}
button.portfoliobackbutton {
display: inline-block;
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif; 
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainerfocused {
animation-fill-mode: forwards 
}
div.portfoliobackcontainerfocused div.portfoliobackarrow{
animation-fill-mode: forwards;
}
@keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
@keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}

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