第一种方法:
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里')}