Функция onmouseover-triggered продолжает срабатывать при наведении курсора мыши

У меня есть функция, которая срабатывает, когда мышь проходит над div.

Div содержит ссылку, которая составляет 100% высоты и ширины содержащего div. Ссылка содержит изображение, которое функция перемещает при наведении курсора мыши на дедушку и бабушку (div).

Функция перемещает изображение вправо, а затем обратно в середину.

Когда я перемещаю мышь над div, функция запускается, но перемещает изображение только на 5 пикселей (один цикл функции) и продолжает перемещать его на 5 пикселей, когда я перемещаю мышь - функция не зацикливается и просто зацикливается один раз при каждом наведении мыши .

<div onmouseover="jotArrow(this);" class="latest-entry latest-entry-third" id="news-link-home">

<a class="home-square-link" href="hello.php">Reviews<br/><img src="<?php echo $config['file_path']; ?>/images/squares-arrow.png" width="60px"/></a>

</div>

JS:

var arrowPos = 0;
var Arrow;

function jotArrow(arrow)
{
    Arrow = arrow.getElementsByTagName('img')[0];

    if (arrowPos < 50) {
        arrowPos = arrowPos + 5;
        Arrow.style.left = arrowPos + 'px';
        setTimeout(jotArrow, 10);
    } else {
        jotArrowBack(arrow)
    }
}

function jotArrowBack(arrow)
{
    if (arrowPos > 0) {
        arrowPos = arrowPos - 5;
        Arrow.style.left = arrowPos + 'px';
        setTimeout(jotArrowBack, 10);
    }
}

Чтобы убедиться, что код правильный, я немного изменил его (по сравнению с приведенным выше), чтобы он перемещал изображение в другом div (при наведении мыши на div1 изображение div2 перемещается). И это работало нормально.

Итак, я предполагаю, что это как-то связано с тем, что изображение находится внутри div, и мышь перемещается по более чем одному элементу. Но на самом деле я не понимаю, почему это может быть проблемой, поскольку функция не заботится о onmouseout, она должна просто выполнять всю свою задачу при первом наведении мыши.

Я попытался установить атрибут onmouseover для всех трех элементов (div, a и img) по отдельности и одновременно - та же проблема.


javascript onmouseover
person Gwen    schedule 26.01.2015    source источник
comment
Под циклом я имел в виду setTimeout, который непрерывно запускает функцию (ы) до нужной позиции.   -  person Gwen    schedule 26.01.2015
comment
@BenWin Он использует seTimeout.   -  person Neil    schedule 26.01.2015
comment
@Нил Понял ;) Удалено   -  person Ben Win    schedule 26.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

В вашем коде есть две проблемы. Как вы упомянули, вы получаете несколько событий наведения мыши, которые запутывают код, но другая проблема заключается в том, что jotArrow каждый раз извлекает элемент Arrow, а во второй раз он не может его найти, потому что ваш вызов setTimeout не передает параметр. Когда вы переключаете код для перемещения другого элемента, я предполагаю, что вы просто пишете что-то вроде document.getElementById('blah'), который каждый раз выбирает один и тот же элемент.

Один из подходов — использовать вспомогательную функцию initArrow, что-то вроде этого:

function initArrow(arrow)
{
    if (arrowPos == 0) {
        Arrow = arrow.getElementsByTagName('img')[0];
        jotArrow();
    }
}
person Neil    schedule 26.01.2015