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 Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
vue实现表格过滤功能
Sep 27 Javascript
webpack4从0搭建组件库的实现
Nov 29 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
php轻松实现文件上传功能
2016/03/03 PHP
JavaScript使用cookie
2007/02/02 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
js微信分享API
2020/10/11 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
详解Python中break语句的用法
2015/05/14 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
优秀求职信范文分享
2013/12/19 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
岗位职责的构建方法
2014/02/01 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
贷款委托书
2014/08/01 职场文书
社区低保工作总结2015
2015/07/23 职场文书
如何写好闭幕词
2019/04/02 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers