当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery判断鼠标是否包含在div中的三种方法

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

2020年10月23日  | 萬仟网IT编程  | 我要评论
第一种方法: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(父元素,子元素)。但是$

第一种方法:

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com