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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JavaScript中filter的用法实例分析
Feb 27 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
php实现两个数组相加的方法
2015/02/17 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
js截取函数(indexOf,join等)
2010/09/01 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python进程间通信用法实例
2015/06/04 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
.NET remoting中对象激活的两种方式
2015/06/08 面试题
培训演讲稿范文
2014/01/12 职场文书
护士辞职信范文
2014/01/19 职场文书
迎新生标语大全
2014/10/06 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
中学生检讨书范文
2014/11/03 职场文书
担保贷款承诺书
2015/04/30 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang