jQuery-鼠标事件及使用unbind移除mouseover、mouseout、mousemove绑定

news/2024/5/9 11:56:31/文章来源:https://blog.csdn.net/LzzMandy/article/details/94449928

$item.mouseover(function(){//鼠标滑入...
}).mouseout(function(){//鼠标滑出...
}).mousemove(function(){//鼠标移动...
});

如上，对dom绑定了鼠标事件，那么如何解除绑定呢？如下设置即可：

$item.unbind('mouseover').unbind('mouseout').unbind('mousemove');

实现一个简单的功能：鼠标滑入时，显示提示信息，滑出时，提示信息消失，移动过程中，提示信息跟随鼠标移动。

完整代码如下：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">$(function(){var x=5;var y=5;//解除绑定，当有tab切换时，防止出现多个提示信息！！！！！！$(".tooltip").unbind('mouseover').unbind('mouseout').unbind('mousemove');$(".tooltip").mouseover(function(e){// 创建新的tooltipvar tooltip='<div id="tooltip">这是一个tooltip,鼠标滑入时显示，跟着鼠标移动</div>';// 追加到body中$("body").append(tooltip);$("#tooltip").css({"top":e.pageY+y+"px","left":e.pageX+x+"px"}).show("fast");}).mouseout(function(){//移除$("#tooltip").remove();}).mousemove(function(e){$("#tooltip").css({"top":e.pageY+y+"px","left":e.pageX+x+"px"});});});</script><style type="text/css">.tooltip{width: 400px;height:100px;margin: 100px auto;border:1px solid blue;}#tooltip{position: absolute;width: 100px;height:200px;border:1px solid red;}</style>
</head>
<body><div class="tooltip" >鼠标在这个区间内滑动，滑入显示提示信息，并且提示信息在滑动过程中跟着鼠标移动</div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_851536.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！