onmouseover-triggered 函数在鼠标悬停时不断触发答案

【问题标题】：onmouseover-triggered function keeps triggering on mouse overonmouseover-triggered 函数在鼠标悬停时不断触发
【发布时间】：2015-03-24 17:52:04
【问题描述】：

我有一个函数，当鼠标经过一个 div 时触发。

div 包含一个链接，它是包含 div 的 100% 的高度和宽度。该链接包含一个图像，当鼠标悬停在祖父母（div）上时，函数会移动该图像。

该函数将图像向右移动，然后回到中间。

当我将鼠标移到 div 上时，函数被触发，但图像仅移动 5px（函数的一个循环），当我移动鼠标时，它继续移动 5px - 函数没有循环，只循环一次在每次鼠标悬停时。

<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 时执行它的整个任务。

我尝试将 onmouseover 属性分别放在所有三个元素（div、a 和 img）上，并且同时全部放在同一时间 - 同样的问题。

【问题讨论】：

循环我的意思是 setTimeout - 它不断触发函数直到所需的位置
@BenWin 他正在使用seTimeout。
@Neil 知道了 ;) 已删除

标签： javascript onmouseover

【解决方案1】：

您的代码似乎有两个问题。正如您所提到的，您会收到多个混淆代码的鼠标悬停事件，但另一个问题是 jotArrow 每次都获取 Arrow 元素，而第二次它找不到它，因为您的 setTimeout 调用没有传递参数。当您切换代码以移动另一个元素时，我假设您只需编写类似 document.getElementById('blah') 的东西，它每次都会选择相同的元素。

一种方法是使用辅助函数 initArrow，如下所示：

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

【讨论】：