防止鼠标事件通过子元素

Question

在下面的示例中，当鼠标位于项标签和水平彩色条之间时，鼠标事件将通过子项(列表项(。

这会导致项目取消强调，尽管鼠标仍在其边界内。这是因为我认为。。。我该如何防止这种情况发生？

const parent = document.querySelectorAll(".parent")[0];
const items = document.querySelectorAll(".parent li");
items.forEach((item) =>
item.addEventListener("mouseenter", () => setHint(item))
);
parent.addEventListener("mouseout", () => setHint(false));
function setHint(item) {
if (item) {
items.forEach((i) => {
i.classList.add(i === item ? "hovered" : "not-hovered");
});
} else {
items.forEach((i) => {
i.className = "";
});
}
}

.parent {
margin: 20px;
padding: 20px;
list-style: none;
background: lightblue;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.parent li {
width: 100%;
margin-bottom: 16px;
line-height: 1.4;
transition: opacity 0.2s ease;
cursor: pointer;
}
.parent li.hovered {
opacity: 1;
}
.parent li.not-hovered {
opacity: 0.1 !important;
}
.parent li > span {
display: flex;
justify-content: space-between;
}
.child-label {
font-size: 14px;
margin-bottom: 4px;
}
.child-bar {
position: relative;
display: block;
width: 100%;
height: 8px;
background: rgb(186, 186, 186);
}
.child-bar-fill {
display: block;
width: 0;
height: 100%;
transition: width 0.4s ease;
background: #fe512c;
}

<ul class='parent'>
<li>
<span class='child-label'>
<b>Lorem ipsum</b>
<span>8 045</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 36.6749%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolor sit amet</b>
<span>8 701</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 39.6654%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Consectetur adipiscing</b>
<span>144</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.656455%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Sed do eiusmod</b>
<span>806</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 3.67433%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Incididunt ut labore</b>
<span>149</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.679249%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolore magna aliqua</b>
<span>470</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 2.1426%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Enim ad minim veniam</b>
<span>73</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.332786%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Cupidatat non proident</b>
<span>87</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.396608%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Reprehenderit in voluptate</b>
<span>3 461</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 15.7777%;'></span>
</span>
</li>
</ul>

Answer 1

如果你想使用当前的设置和JS，你只需要pointer-events: none添加到你的标签和条中。

因为您基本上是将mouseover(通过mouseenter和mouseout(作为<li>的目标，所以当您的鼠标位于标签或栏上时，它不再是接收mouseover的项目，因此会触发mouseout。

通过添加pointer-events:none，我们告诉浏览器忽略该项目上的所有事件，并让它们传递到下面的项目。

const parent = document.querySelectorAll(".parent")[0];
const items = document.querySelectorAll(".parent li");
items.forEach((item) =>
item.addEventListener("mouseenter", () => setHint(item))
);
parent.addEventListener("mouseout", () => setHint(false));
function setHint(item) {
if (item) {
items.forEach((i) => {
i.classList.add(i === item ? "hovered" : "not-hovered");
});
} else {
items.forEach((i) => {
i.className = "";
});
}
}

.parent {
margin: 20px;
padding: 20px;
list-style: none;
background: lightblue;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.parent li {
width: 100%;
margin-bottom: 16px;
line-height: 1.4;
transition: opacity 0.2s ease;
cursor: pointer;
display: block;
}
.parent li.hovered {
opacity: 1;
}
.parent li.not-hovered {
opacity: 0.1 !important;
}
.parent li > span {
display: flex;
justify-content: space-between;
}
.child-label {
font-size: 14px;
margin-bottom: 4px;
pointer-events: none;
}
.child-bar {
position: relative;
display: block;
width: 100%;
height: 8px;
background: rgb(186, 186, 186);
pointer-events: none;
}
.child-bar-fill {
display: block;
width: 0;
height: 100%;
transition: width 0.4s ease;
background: #fe512c;
pointer-events: none;
}

<ul class='parent'>
<li>
<span class='child-label'>
<b>Lorem ipsum</b>
<span>8 045</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 36.6749%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolor sit amet</b>
<span>8 701</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 39.6654%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Consectetur adipiscing</b>
<span>144</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.656455%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Sed do eiusmod</b>
<span>806</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 3.67433%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Incididunt ut labore</b>
<span>149</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.679249%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolore magna aliqua</b>
<span>470</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 2.1426%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Enim ad minim veniam</b>
<span>73</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.332786%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Cupidatat non proident</b>
<span>87</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.396608%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Reprehenderit in voluptate</b>
<span>3 461</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 15.7777%;'></span>
</span>
</li>
</ul>

Answer 2

我相信您可以使用下面这样一种仅使用CSS的方法来解决您的问题，该方法结合了parent:hover和parent li:hover。

.parent {
margin: 20px;
padding: 20px;
list-style: none;
background: lightblue;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.parent li {
width: 100%;
margin-bottom: 16px;
line-height: 1.4;
transition: opacity 0.2s ease;
cursor: pointer;
opacity: 1;
}
.parent:hover li {
opacity: 0.1;
}
.parent:hover li:hover {
opacity: 1;
}
.parent li > span {
display: flex;
justify-content: space-between;
}
.child-label {
font-size: 14px;
margin-bottom: 4px;
}
.child-bar {
position: relative;
display: block;
width: 100%;
height: 8px;
background: rgb(186, 186, 186);
}
.child-bar-fill {
display: block;
width: 0;
height: 100%;
transition: width 0.4s ease;
background: #fe512c;
}

<ul class='parent'>
<li>
<span class='child-label'>
<b>Lorem ipsum</b>
<span>8 045</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 36.6749%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolor sit amet</b>
<span>8 701</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 39.6654%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Consectetur adipiscing</b>
<span>144</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.656455%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Sed do eiusmod</b>
<span>806</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 3.67433%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Incididunt ut labore</b>
<span>149</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.679249%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Dolore magna aliqua</b>
<span>470</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 2.1426%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Enim ad minim veniam</b>
<span>73</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.332786%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Cupidatat non proident</b>
<span>87</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 0.396608%;'></span>
</span>
</li>
<li>
<span class='child-label'>
<b>Reprehenderit in voluptate</b>
<span>3 461</span>
</span>
<span class='child-bar'>
<span class='child-bar-fill' style='width: 15.7777%;'></span>
</span>
</li>
</ul>