Onmouseover работает несколько раз при наведении на элемент?

Почему onmouseover запускается несколько раз, пока я наводил курсор на один элемент?

Я пытаюсь запустить простую анимацию, когда пользователь наводил курсор на значок, но он запускается несколько раз.

Я тестирую его здесь:

В любом случае, какие-либо идеи о том, как его исправить? возможно, вместо этого используется прослушиватель?

Это javascript работает onmouseover:

function upIcon(n) {
    console.log("Mouseover icon: " + n);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 );
    $('#icon' + n).animate({ backgroundPositionY : "+=15px" }, 200 );
    }

Ответ 1

Попробуйте использовать mouseenter и mouseleave вместо mouseover и mouseout. Первый срабатывает только тогда, когда курсор входит в область элемента, а последний срабатывает, когда курсор перемещается между потомками.

Я добавил этот код на свою страницу через консоль и работал как ожидалось:

//bind an event handler to each nav element for the mouseenter event
$('.categoryButtons').children().bind('mouseenter', function () {

    //call the `upIcon` function with the index of the current element
    upIcon(($(this).index() + 1));
});

Я также удалил встроенный onmouseover код для каждого навигационного элемента.

Update

Вы можете использовать свою существующую функцию несколько иначе и не использовать анонимную функцию для вашего обработчика событий (обратите внимание на цепочки функций, чтобы избежать дублирования выбора):

function upIcon(event) {
    var n = ($(this).index() + 1);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 ).animate({ backgroundPositionY : "+=15px" }, 200 );
}

$('.categoryButtons').children().bind('mouseenter', upIcon);

Когда вы ссылаетесь на существующую функцию как обработчик события, она получает объект event, как и любой другой обработчик событий, и вы также можете использовать this для ссылки на элемент, на котором было инициировано событие.

Ответ 2

Несколько вещей:

Чтобы решить вашу проблему, я бы использовал событие mouseenter вместо этого - это означает, что когда мышь входит в элемент, код выполняется, а затем вы можете использовать mouseleave для изменения анимации снова, когда указатель мыши уходит.
Вместо использования беспорядочных событий onmouseover вам будет лучше использовать jQuery для того, для чего он предназначен - ненавязчивые коды. Связывать события с элементами, например.
```
$(document).ready(function() {
     $(".icon").mouseenter(function() {
          $(this).animate({ backgroundPositionY : "-=15px" }, 200 );
     });

     $(".icon").mouseleave(function() {
          $(this).animate({ backgroundPositionY : "+=15px" }, 200 );
     });


});
```

Ответ 3

Поскольку вы используете jQuery, вы можете использовать mouseenter вместо mouseover - он предназначен для защиты вас от событий mouseout, когда в вашей цели есть несколько элементов.

Подробнее: http://api.jquery.com/mouseenter/

Итак, вы хотите удалить события, прикрепленные к каждому элементу (который не является большой формой в первую очередь, и вместо этого сделать следующее в блоке script:

$('.categoryButtons').find('a').mouseenter(function(){
    /* ... Do something, probably depending on $(this).attr('id') or $(this).attr('rel') ... */
});

Ответ 4

Вместо использования onmouseover я бы рекомендовал использовать JQuery mouseenter, чтобы избежать многократного запуска обработчика из-за пузырьков событий:

http://api.jquery.com/mouseenter/