Question

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

当链接悬停时，它会调用一个函数dothis()来更改页面上div的内容，但我只希望它为每个链接运行一次该函数，无论它是多少次徘徊。

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

如果让事情变得更容易，我会加载jquery。

我有什么想法可以做到这一点吗？

Answer 1

使用

.one()

jQuery API

描述：将处理程序附加到元素的事件。该处理程序每个元素最多执行一次。

Answer 2

您可以在unbind

上使用mouseenter

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

或one

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

Answer 3

我是这样做的：

当用户将鼠标悬停在链接上时，函数将检查内部变量。如果它为null，则该函数将设置内部变量，使其不会多次调用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>

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

3 个答案: