Question

我的简单js代码有点问题。对于我来说未知的原因，它多次调用函数。如果用鼠标悬停在div上，那么它应该是函数1次。相反，如果我每次将鼠标移动到div中的某些内容时调用都会起作用。这是我的代码：

<div class="col-md-4" data-lat="50.12" data-lng="19.10" data-name="pierwszy element" id="oferty">
     <h2>Get more libraries</h2>
     <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
</div>

这是我的Js代码：

$("#oferty.col-md-4")
     .mouseover(function () {
        //$(this).css("backgroundColor", "yellow");
        modifyPoint($(this).attr("data-name"))      
 });

我认为我的选择器有问题。谁能告诉我如何修改它？

Answer 1

您需要使用mouseenter，来自子元素的mouseover会传播到父元素

$("#oferty.col-md-4").mouseenter(function () {
    //$(this).css("backgroundColor", "yellow");
    modifyPoint($(this).attr("data-name"))
})

MDN: mouseenter

与鼠标悬停类似，它的不同之处在于它不会起泡和它当指针从其后代之一移动时，不会发送物理空间到自己的物理空间。

Answer 2

你要找的是'mouseenter'，而不是'mouseover'; - ）

鼠标悬停的函数调用太多

2 个答案: