Question

在我网站的某个部分，我会在用户将鼠标悬停在链接上时显示信息。然后，当用户鼠标移动链接时，显示信息应该离开。以下是此代码：

function hover_user(id_user){
   $("#user"+id_user).mouseleave(function(){
     displayinfo();
   });
}

如何添加点击功能，以便当用户点击链接时，忽略鼠标距离并显示信息，直到用户决定将鼠标移到另一个链接上？

谢谢！

Answer 1

$("a[id^='user']")
    .on("mouseenter", function(){
        displayinfo( $(this) ); // show info on mouseover
    })
    .on("mouseleave", function(){
        // code to hide info on mouseout here
    })
    .on("click", function(){
        $(this).off("mouseleave"); // unbind the mouseout onclick
    });

Example

我们将displayinfo();函数绑定到元素的mouseenter事件。然后，我们将隐藏信息的函数绑定到mouseout事件。

最后一个on()函数绑定到元素的click事件，并删除mouseleave处理程序。因此，在点击它之后，当移除鼠标时它不会消失。

Answer 2

让我们使用data属性标记最后一个被点击的用户，然后在显示信息之前修改mouseleave侦听器功能以检查用户。如果我跟着你，我想这会做你所描述的：

function hover_user(id_user){
   $("#user"+id_user).click(function(){
     // Reset the other users
     $('[data-clicked]').attr('data-clicked',false);
     // Set this user as clicked
     $(this).attr('data-clicked',true);
   });

   $("#user"+id_user).mouseleave(function(){
     if($(this).attr('data-clicked') != 'true'){
       displayinfo();
     }
   });

}

如果没有看到你的其余代码，我无法确定，但最好将所有users分配给一个公共类，并一次性实例化他们的监听器。

Answer 3

您可以在click上的链接中添加一个特殊类，对于mouseleave事件，将消失函数包装在仅在该类不存在时应用的条件中。最后，使用mouseover在removeClass事件处理程序中添加现有函数，以删除可能包含它的任何链接中的特殊类，并为当前任何工具提示元素运行消失函数可见。

Answer 4

您可以执行以下操作。保留current_id变量以跟踪单击的用户并在mouseleave内查看此变量，如果它与当前用户相同，则不会隐藏信息。

var current_id;

function hover_user(id_user){
   $("#user"+id_user).mouseleave(function(){

     if(current_id == id_user)
        return;

     current_id = id_user;
     displayinfo();
   });
}

function click_user(id_user){
     $("#user"+id_user).click(function(){
        current_id = id_user;
    });
}

结合使用Hover和Click jQuery功能

4 个答案: