`

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

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

    div.onmouseout=function(event){ 
                        var div = document.getElementById("test"); 
                    <span style="color:#FF6600;">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;  </span> 
                        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
分享到:
评论

相关推荐

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

    主要介绍了js判断鼠标位置是否在某个div中的方法,涉及JavaScript针对鼠标事件的响应及页面元素属性操作相关技巧,需要的朋友可以参考下

    vue 使用鼠标滚动加载数据的例子

    关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下《vue.js 实战》中作者的一个解决策略: 1. 设置一个标志位用来判断数据是否在加载中 2. 将滚动区域设置成 overfow:...

    史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用,含全部源代码)

    当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值 为编程带来方便 如果el的值是this,可省略,即所有的...

    超实用的jQuery代码段

    1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...

    55种网页小技巧 ---- 下载无需扣分,具有一定收藏价值

    在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动.html 如何设定打开页面的大小.html 屏蔽功能键Shift,Alt,Ctr.html 屏蔽鼠标右键.html 怎么判断是否是字符.html 怎样让表单没有凹凸感.html 改变...

    dreamweaver的各种组件

    Back to my frame 在网页中加入这个action后浏览器将会判断当前的页面是否包含在一 个帧中,如果结果为否则会自动跳转到指定的url地址。 History Go 2.0 这个Behavior的作用是在网页中增加一个“History Go”的...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例135 检测数组中是否存在某个值 163 实例136 获取数组中的当前单元 164 实例137 从数组中随机取出元素 165 实例138 合并数组 166 实例139 拆分数组 167 实例140 遍历数组 168 2.11 日期和时间 169 实例141 设置...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例135 检测数组中是否存在某个值 163 实例136 获取数组中的当前单元 164 实例137 从数组中随机取出元素 165 实例138 合并数组 166 实例139 拆分数组 167 实例140 遍历数组 168 2.11 日期和时间 169 实例141 设置...

    苹果8XPC和手机二合一完整版

    ads/ 存放广告js文件,可自定义名称, 在当前模版路径的config.xml 里配置好 html/ 存放html模版文件,可自定义名称,在后台配置好。 js/ 存放模版相关js文件 js/home.js 系统内置功能的JS函数库 css/ 存放样式表...

Global site tag (gtag.js) - Google Analytics