js判断鼠标位置是否在某个div中的方法


Posted in Javascript onFebruary 26, 2016

本文实例讲述了js判断鼠标位置是否在某个div中的方法。分享给大家供大家参考,具体如下:

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了。解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。
就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了。

div.onmouseout=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程序设计有所帮助。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
超实用的JavaScript表单代码段
Feb 26 #Javascript
理解javascript中Map代替循环
Feb 26 #Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 #Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
js jquery数组介绍
2012/07/15 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
Python创建日历实例
2014/08/21 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python sublime安装及配置过程详解
2020/06/29 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Android笔试题总结
2014/11/29 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
酒店节能减排方案
2014/05/26 职场文书
家长会标语
2014/06/24 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
员工辞退通知书
2015/04/17 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js