Question

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

div包含一个链接，它是包含div的100％高度和宽度。该链接包含一个图像，该功能在onmouseover祖父母（div）时移动。

该功能将图像向右移动，然后再移回中间。

当我将鼠标移到div上时，该功能被触发但是将图像移动仅5px（该功能的一个循环）并在我移动鼠标时将其移动5px - 该功能不循环并且只循环一次在每个onmouseover。

<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的onmouseover导致div2图像移动）。它运作良好。

所以我猜它与div中的图像有关，而鼠标遍历多个元素。但是我真的不知道为什么这会成为一个问题，因为函数不关心onmouseout它应该只是在第一个onmouseover执行它的整个任务。

我已经尝试将onmouseover属性分别放在所有三个元素（div，a和img）上，并且所有这些元素同时存在 - 同样的问题。

Answer 1

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

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

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

onmouseover-triggered函数在鼠标悬停时保持触发

1 个答案: