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 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
webpack多页面开发实践
Dec 18 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
angularjs性能优化的方法
Sep 05 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 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
对javascript和select部件的结合运用
2006/10/09 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
PHP实现微信退款功能
2018/10/02 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
使用PHP开发留言板功能
2019/11/19 PHP
心扬JS分页函数代码
2010/09/10 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
Node.js学习教程之Module模块
2019/09/03 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python实现简易通讯录修改版
2018/03/13 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
党性分析自查总结
2014/10/14 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript