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 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
react实现菜单权限控制的方法
Dec 11 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
js实现轮播图特效
2020/05/28 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
人机交互程序 python实现人机对话
2017/11/14 Python
基于python3实现倒叙字符串
2020/02/18 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
给学校建议书范文
2014/05/13 职场文书
元旦主持词开场白
2015/05/29 职场文书
八月一日观后感
2015/06/10 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
python pygame 开发五子棋双人对弈
2022/05/02 Python