jquery如何判断鼠标是否在div上？下面本篇文章给大家介绍一下使用jquery判断鼠标是否在div上的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
jquery如何判断鼠标是否在div上？
方法1：用 $.contains 来判断
$.contains是jquery里用来判断一个标签是否包含另一个标签的方法.
//$.contains的语法结构为： $.contains(容器，要判断的标签元素);
要注意的，$.contains的两个参数必须为dom对象，不能是jquery对象！
来看用$.contains来判断鼠标是否处于div之内的具体代码：
if($.contains($("#aijquery")[0],e.target) || $("#aijquery")[0]==e.target){
$(".info").text("鼠标在这个DIV里");
}else{
$(".info").text("鼠标不在这个DIV里");
}
上面实例里，#aijquery 就是要判断的DIV，e.target是鼠标触发的节点。
要判断鼠标是否位于div#aijquery之内，先$.contains来判断，鼠标所触发的节点是否被包含在div#aijquery内，然后再判断鼠标触发的节点是否就是当前的div#aijquery节点，这两种情况下，鼠标都处在div之内。
方法2：使用mouseover和mouseout来判断
当鼠标指针位于元素上方时，会发生 mouseover 事件，当鼠标指针从元素上移开时，发生 mouseout 事件。
PS：和 mouseenter/mouseleave 事件不同，不论鼠标指针进入/离开被选元素还是任何子元素，都会触发 mouseover/mouseout 事件。只有在鼠标指针进入/离开被选元素时，才会触发 mouseenter/mouseleave 事件。
$("#aijquery").mouseover(function(){
$(".primary").text("方法二：鼠标在这个DIV里");
}).mouseout(function(){
$(".primary").text("方法二：鼠标不在这个DIV里");
});
缺点：在页面初始化时，也就是刚打开页面时，是判断不出来的，只有把鼠标移上div上一次，激活了mouseover事件后，才能判断，具体可以看上面给的那个在线实例演示。
方法3：最传统的方法，也就是通过X、Y坐标来判断
var x=e.clientX;
var y=e.clientY;
var div_x_1 = $("#aijquery").offset().left;
var div_y_1 = $("#aijquery").offset().top;
var div_x_2 = $("#aijquery").offset().left+$("#aijquery").outerWidth();
var div_y_2 = $("#aijquery").offset().top+$("#aijquery").outerHeight();
if( x < div_x_1 || x > div_x_2 || y < div_y_1 || y > div_y_2){
$(".danger").text("方法三：鼠标不在这个DIV里");
}else{
$(".danger").text("方法三：鼠标在这个DIV里");
}
综合示例：
<!doctype html>
<html>
<head>
<script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body class="text-center p-5">
<DIV class="border border-danger p-5">
<Div id="aijquery" class="border border-dark p-3 alert-success">
<span class="info border border-info">inifo</span><br>
<span class="primary border border-dark">inifo</span><br>
<span class="danger border border-danger">inifo</span>
</Div>
</DIV>
<script language="JavaScript">
$(document).mousemove(function(e){
if($.contains($("#aijquery")[0],e.target) || $("#aijquery")[0]==e.target){
$(".info").text("方法一：鼠标在这个DIV里");
}else{
$(".info").text("方法一：鼠标不在这个DIV里");
}
});
$("#aijquery").mouseover(function(){
$(".primary").text("方法二：鼠标在这个DIV里");
}).mouseout(function(){
$(".primary").text("方法二：鼠标不在这个DIV里");
});
$(document).mousemove(function(e){
var x=e.clientX;
var y=e.clientY;
var div_x_1 = $("#aijquery").offset().left;
var div_y_1 = $("#aijquery").offset().top;
var div_x_2 = $("#aijquery").offset().left+$("#aijquery").outerWidth();
var div_y_2 = $("#aijquery").offset().top+$("#aijquery").outerHeight();
if( x < div_x_1 || x > div_x_<p style="color:transparent">来源gao!%daima.com搞$代*!码网</p>2 || y < div_y_1 || y > div_y_2){
$(".danger").text("方法三：鼠标不在这个DIV里");
}else{
$(".danger").text("方法三：鼠标在这个DIV里");
}
});
</script>
</body>
</html>
更多web前端开发知识，请查阅 搞代码网 ！！
以上就是jquery如何判断鼠标是否在div上？的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：jquery如何判断鼠标是否在div上？
