html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法。分享给大家供大家参考,具体如下:
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了。解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。
就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了。
div.οnmοuseοut=function(event){
var div = document.getElementById("test");
var x=event.clientX;
var y=event.clientY;
var divx1 = div.offsetLeft;
var divy1 = div.offsetTop;
var divx2 = div.offsetLeft + div.offsetWidth;
var divy2 = div.offsetTop + div.offsetHeight;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
//如果离开,则执行。。
}
后面为一些常用属性方便查找:
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
clientX,clientY 鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
希望本文所述对大家JavaScript程序设计有所帮助。
html判断坐标,js判断鼠标位置是否在某个div中的方法相关推荐
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
- JS获取鼠标位置,兼容IE FF
JS获取鼠标位置,兼容IE FF 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事 ...
- 开发板Linux手指滑动方向,移动应用滑动屏幕方向判断解决方案,JS判断手势方向...
问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...
- html鼠标自动向下滑动,js实现鼠标感应向下滑动隐藏菜单的方法
本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 隐藏在网页左上角感应鼠标向下滑出的隐藏菜单 BACKGROUND-COLOR: blue; BORDER ...
- js获取鼠标位置和滚动条位置
1相对窗口,当然是以浏览器窗口为主了,即浏览器中可见部分(即包含文档部分)的左上角为坐标原点.这是用clientX和clientY获取的. 2相对屏幕,当然是以你的显示器为主了,显示器的左上角为原点, ...
- php判断二维数组里值均为空,php中经典方法实现判断多维数组是否为空
php中经典方法实现判断多维数组是否为空 复制代码 代码如下: //判断一个数组是否为空 /** array( ); 空 array( array( ), array( ), array( ) ); ...
- python把坐标写入文本_Python实现将数据写入netCDF4中的方法示例
本文实例讲述了Python实现将数据写入netCDF4中的方法.分享给大家供大家参考,具体如下: nc文件为处理气象数据文件.用户可以去https://www.lfd.uci.edu/~gohlke/ ...
- java jsp js xml_jsp实现将信息放入xml中的方法
本文实例讲述了jsp实现将信息放入xml中的方法.分享给大家供大家参考,具体如下: 一.jsp代码: 省: 北京 广东 海南 市: 北京 二.ajax代码创建服务器请求代码不用写了,写onchange ...
- python end用法在固定位置换行_在Python中链接方法时,换行的样式正确
PEP 8建议使用括号,这样您就不需要class Rectangle(Blob): def __init__(self, width, height, color='black', emphasis= ...
最新文章
- 第十九章 9标签类Label
- 在matlab中提取线性方程组的系数矩阵
- CVPR 2018 SA-Siam:《A Twofold Siamese Network for Real-Time Object Tracking》论文笔记
- 腾讯的一笔画游戏--巧妙解法
- Beta版本冲刺第二天
- 阻止html页面加载,如何防止页面加载重复的JS?
- SpringMVC 执行流程解析
- git安装-centos版
- 收尾过程组-项目管理
- 绘制永磁同步电机定子绕组示意图——Visio制图总结【电控类】(一)
- Java编写五线谱上的音符_五线谱入门(三)——音符详解
- linux服务网卡速率查看,linux下查看网卡速率
- java生成word并导出pdf
- 模拟实现透明网桥的自学习与过滤功能
- word 插入目录及错误!未找到目录项
- python爬虫爬取强智教务系统过程
- WHT, SLANT, Haar
- 蚂蚁庄园运动会登山赛!3d项目入门实战!Cocos Creator 3D!
- 学习OpenCV3:在空白图片上画虚线
- mysql的prepared statement