鼠标悬停操作只运行一次(如何)

Question

当鼠标悬停在特定区域时,我想在工具提示中加载数据(通过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");
            })

Answer 1

用.one:

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

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

Answer 2

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

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

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

Answer 3

使用现代JS！

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

文档, CanIUse