若鼠标被拖动到按钮内的SVG图标上，悬停时会播放双倍的声音

Question

我有一个问题，我检查了悬停在我的#homeButton ID上的情况，并播放了一个声音，声音播放没有任何问题，当你将鼠标拖动到按钮内的SVG图标上并再次点击按钮时，问题就来了，声音播放我不想要的，它应该只有在你将鼠标放在按钮外后才能再次播放。

以下是我如何检查悬停：

$(homeButton)
.on('mouseover', function (event) {
titleDisplay.innerText = 'Hem';
hoverSound.play();
})
.on('mouseout', function (event) {
titleDisplay.innerText = '';
});

现在，这看起来是一个功能完美的代码，但如果您悬停SVG图标，它将被视为"mouseout"，然后当您再次按下按钮时再次播放。如果有帮助的话，按钮和图标都是由SVG制成的。

菜单的主页按钮部分代码如下：

<g transform="translate(0 ,-1.3369) scale(0.9618028136579452)" class="sector selected" data-id="homeButton" data-index="1" id="homeButton"><path d="M35.35534 -35.35534A51.98570776668778 51.98570776668778 0 0 0-35.35534 -35.35534L-14.14214 -14.14214A21.389995436681446 21.389995436681446 0 0 1 14.14214 -14.14214Z"></path><use x="0" y="-35" width="10" height="10" fill="white" xlink:href="#homeSVG" transform="translate(-5,-5)"></use></g>

path标记是实际的按钮，use标记是图标。有人能解决在你真正完全按下按钮或按下其他按钮之前无法播放声音的问题吗？

这不是必须使用jQuery来完成的，如果你可以用普通的JS来完成，那就很好了

这是菜单的图片，如果它有助于

在写这篇文章的时候，我可能想出了一个解决方案，还没有测试过，因为我需要睡觉！但该解决方案是为每个按钮使用一个变量，例如homeSoundPlayed=false，contractSoundPlayed=false。这就是我当时想到的代码：

var homePlayed = false; //New line
var contactPlayed = false; //New line
$(homeButton)
.on('mouseover', function (event) {
contactPlayed = false; //New line
titleDisplay.innerText = 'Hem';
if(!homePlayed){ //New line
hoverSound.play();
homePlayed = true; //New line
}
})
.on('mouseout', function (event) {
titleDisplay.innerText = '';
});
$(contactButton)
.on('mouseover', function () {
homePlayed = false; //New line
titleDisplay.innerText = 'Kontakta Oss';
if(!contactPlayed){ //New line
hoverSound.play();
contactPlayed = true; //New line
}
})
.on('mouseout', function () {
titleDisplay.innerText = '';
});

所以我的想法是，当你悬停任何按钮时，将所有其他名为Played var的按钮重置为false，但不会为你当前悬停的按钮重置var。但我有一个问题，如果你在菜单外徘徊，我该如何检查。

这只是我想出的一个解决方案，如果你知道更好的解决方案，请告诉我！

Answer 1

这听起来像是事件冒泡问题。尝试向每个事件侦听器添加一个检查，以确保处理程序只针对正确的元素执行。

.on('mouseout', function(event) {
if (event.target !== this) return;
// Do your logic here
});

事件目标