JS悬停链接调用函数，但只有一次

JS hover link call function, but only once?

本文关键字：一次 链接 悬停 调用 函数 JS      更新时间：2023-09-26

我有一个简单的html页面，有很多链接。

当一个链接被悬停在上面时，它调用一个函数dothis()来改变页面上div的内容，但是我只想对每个链接运行一次这个函数，不管它被悬停了多少次。

例如，如果用户将鼠标悬停在特定的链接上，将鼠标移开并再次悬停，则不会再次加载该函数(每个链接都有1次悬停限制，因此用户可以将鼠标悬停在链接a上，然后链接B在悬停时仍然可以运行该函数(但每个链接只能运行一次))。

我已经加载了jquery，如果这使事情更容易。

有什么好主意吗?

use

.one()

jQuery API。

描述:为元素的事件附加一个处理程序。的对每个元素最多执行一次。

可以在mouseenter上使用unbind 

$("#elementID").mouseenter(function(e){
$(this).unbind(mouseenter);
});

或one 

$("#elementID").one("mouseenter",function(){
//do something
});

我是这样做的:

当用户将鼠标悬停在链接上时，函数将检查内部变量。如果它为空，函数将设置内部变量，这样它就不会多次调用dothis()函数。

<!DOCTYPE html>
<html>
    <head>
        <title>Hover Once</title>
    </head>
    <body>

        <a href="#" onmouseover="onHover(this)">Link 1</a>
        <a href="#" onmouseover="onHover(this)">Link 2</a>
        <a href="#" onmouseover="onHover(this)">Link 3</a>
        <script>
            function onHover(element) {
                if(element.alreadyHovered == null) {
                    console.log("call dothis()");
                    element.alreadyHovered = true;
                }
            }
            </script>
    </body>
</html>
相关文章：