jQuery判断鼠标是否包含在div中的三种方法

第一种方法：

1.用$.contains判断

 $(document).mousemove(function(e){
	if($.contains($('.box')[0],e.target) || $.contains($('.box')[0]==e.target)){
		alert('鼠标在box盒子里')}
	else{alert('鼠标不在box盒子里')}
})

$.contains是jQuery里用来判断一个标签是否包含另一个标签的方法，其用法是$.contains(父元素，子元素）。但是$.contains包含的两个对象必须是DOM对象，不能是jQuery对象，$('.box')[0]表示将jQuery对象转换成DOM对象。e.target表示鼠标触发的节点，所以$.contains($('.box')[0],e.target)表示判断鼠标触发的节点是不是在box盒子里。

2. 用mouseover，mouseout判断

$('.box').mouseover(function(){
	alert('鼠标包含在盒子里')
}).mouseout(function(){
	alert('鼠标不包含在盒子里')
})

缺点：在页面初始化时，也就是刚打开页面，是判断不出来的，只有把鼠标移上div一次，激活了mouseover事件后，才能判断。

3. 通过x，y的坐标值来判断

var x=e.clientX; //鼠标相对屏幕的横坐标
var y=e.clientY; //鼠标相对屏幕的纵坐标
var div_x_1 = $('.box').offset().left; //box相对屏幕的横坐标
var div_y_1 = $('.box').offset().top; //box相对屏幕的纵坐标
var div_x_2 = $('.box').offset().left+('.box').outerWidth();
var div_y_2 = $('.box').offset().top+('.box').outerHeight();
if(x < div_x1 || x > div_x_2 || y < div_y_1 || y > div_y_2){
	alert('鼠标不在box盒子里')
}else{alert('鼠标包含在box里')}

本文地址：https://blog.csdn.net/qq_43654065/article/details/109240745