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

当鼠标位于特定区域上时，我希望（通过ajax）在工具提示中加载数据。问题是，只要我的鼠标在该区域上，就会进行ajax调用。有没有办法让onmouseover（ajax调用）效果只发生一次？代码如下：

$.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");
            })

$.post（'calendar/event details'，{'eventId'：event.id}，
功能（数据）{
this.top=（ui.clientY+15）；this.left=（ui.clientX-230）；
$（'body'）。追加（''+数据+''）；
$（'div#vtip'）.css（“top”，this.top+“px”）.css（“left”，this.left+“px”）.fadeIn（“slow”）；
$（'div#vtip'）.css（“位置”、“绝对”）；
$（'div#vtip'）.css（“z-index”，“+99”）；
})

带有：

---

.one

将在处理程序执行后立即分离处理程序。因此，它将不再执行。

您可能希望将函数挂接到

onmouseinter

事件，而不是

onMouseOver

事件，以及挂接到隐藏工具提示的

onMouseLeave

事件的函数：

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

---

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

我知道这已经是一个很长的时间没有讨论过的话题了，但对于任何想寻找简单替代方案的人来说：

设置静态变量并检查最后使用的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 
    }
}

使用现代JS

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

---

，

我想您需要使用

onmouseinter

而不是

onmouseover

---

请阅读文档

您的HTML在哪里，绑定鼠标悬停事件的代码在哪里？对我帮助很大！谢谢。

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