Блог

У меня есть проблема, которую я проверяю, например, на мой идентификатор #homeButton и воспроизводит звук, звук воспроизводится без каких-либо проблем, проблема возникает, когда вы перетаскиваете мышь на значок SVG внутри кнопки и снова нажимаете кнопку, звук воспроизводится, чего я не хочу, он должен тольковы сможете воспроизводить снова, как только мышь окажется за пределами кнопки.

Вот как я проверяю наведение:

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

Теперь это выглядит как идеально работающий код, но если вы наведете указатель мыши на значок SVG, он считается «наведением курсора мыши», а затем воспроизводится снова, когда вы снова нажимаете кнопку. И кнопка, и значок сделаны из SVG, если это поможет.

Эта часть меню homebutton в коде выглядит так:

 <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, conteactSoundPlayed = 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 = '';
            });
 

Итак, я думаю, что при наведении курсора на любую кнопку все остальные кнопки с именем var имеют значение false, но не сбрасывают значение var для той, на которую вы в данный момент наводите курсор. Но тогда у меня возникает вопрос, как мне проверить, зависли ли вы за пределами меню.

Это просто решение, которое я придумал, если вы знаете лучшее, пожалуйста, скажите мне!

Это звучит как проблема с пузырьками событий. Попробуйте добавить проверку к каждому прослушивателю событий, чтобы убедиться, что обработчик выполняется только для нужного элемента.

 .on('mouseout', function(event) {
  if (event.target !== this) return;

  // Do your logic here
});
 

событие.цель