鼠标悬停操作只运行一次（如何）

I would like to load data(via ajax) in a tooltip when the mouse is over a specific area. The problem is that the ajax call is made as long as my mouse is on that area. Is there any way, that I could make onmouseover (ajax call) efect happen just once? Here is the code:

当鼠标悬停在特定区域时,我想在工具提示中加载数据(通过ajax)。问题是只要我的鼠标在该区域上,就会进行ajax调用。有什么办法,我可以让onmouseover(ajax call)效果只发生一次吗?这是代码:

$.post('calendar/event-details', {'eventId' :event.id},
            function (data){
                this.top = (ui.clientY + 15); this.left = (ui.clientX - 230);
                $('body').append( '<div id="vtip">' + data + '</div>' );
                $('div#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
                $('div#vtip').css("position","absolute");
                $('div#vtip').css("z-index", "+99");
            })

4 个解决方案

#1

With .one:

$('element').one('mouseover', function() { /* ajax */ });

.one will detach the handler as soon as it is executed. As a result, it won't execute any more times.

.one将在处理程序执行后立即分离。结果,它将不再执行。

#2

You may want to hook your function to the onMouseEnter event instead of the onMouseOver event, along with a function hooked to the onMouseLeave event that hides the tooltip:

您可能希望将函数挂钩到onMouseEnter事件而不是onMouseOver事件,以及挂钩到隐藏工具提示的onMouseLeave事件的函数:

$('element').mouseenter(function() {
    /* Make request, show tooltip */
});
$('element').mouseleave(function() {
    /* Hide tooltip */
});

Note that the pure JS versions of these events are IE only, jQuery simulates the behaviour for other browsers

请注意,这些事件的纯JS版本仅限IE,jQuery模拟其他浏览器的行为

#3

Use modern JS!

使用现代JS!

node.addEventListener("mouseover", function() {
    // Load data here
}, {once : true});

Documentation, CanIUse

#4

I know it's been a long time since this has been a topic but for anyone looking for an easy alternative:

我知道这已经很长时间了,因为这是一个话题,但对于任何寻找简单替代方案的人来说:

Set a static variable and check the last id used. If the last id is the current id, do nothing; quick example below

设置一个静态变量并检查最后使用的id。如果最后一个id是当前id,则什么都不做;以下简单例子

var LastId = null;

function Hover(Id){
    if(Id!= LastId){
        LastId = Id;
        $(Id).hide('fast');
    }else{
      //Do nothing; this will keep the function from recalling 
    }
}

#1