如何判断鼠标是否在DIV的区域内


Posted in Javascript onNovember 13, 2013

今天研究了一下这个问题,也普及了一下知识吧。

方法一:

通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域。 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道。

function chkIn()
    {
  div_1.innerText = "现在你把鼠标移入层了!";
  div_1.style.font = "normal black";
 }
   function chkOut()
    {
  div_1.innerText = "现在你把鼠标移出层了!";
  div_1.style.font = "bold red";
 }

<div id="div_1" style="background-color:lightblue; width:400px; height:300px; " 
       onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
  </div>

方法二:
function   checkIn(e){
var   x=window.event.clientX;
var   y=window.event.clientY;
var   str= ' ';
for(i=0;i <document.body.children.length;i++){
            var   obj=document.body.children[i];
          if(x> obj.offsetLeft
                                  &&x <(obj.offsetLeft+obj.clientWidth)
                          &&y> obj.offsetTop
                        &&y <(obj.offsetTop+obj.clientHeight)){
                str+= ' <鼠标位于层 '+obj.id+ '范围之内> \n ';
          }else{
                str+= ' <鼠标位于层 '+obj.id+ '范围之外> \n ';
        }
  }
alert(str);
}
document.onclick=checkIn

方法三:

这个方法是最简单的实用的。

if(myDiv.contains(window.event.srcElement))

即 if(myDiv.contains(鼠标位置的元素对象))

具体情况还是要根据自己需要来选择,我是调试了一下方法三,但是具体也没使用上。 其他方法,继续研究中。

Javascript 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
bootstrap table小案例
Oct 21 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
HTTP 304错误的详细讲解
Nov 13 #Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 #Javascript
js字母大小写转换实现方法总结
Nov 13 #Javascript
jQuery替换字符串(实例代码)
Nov 13 #Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 #Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 #Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 #Javascript
You might like
php获取地址栏信息的代码
2008/10/08 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
应届生自我鉴定
2013/12/11 职场文书
西式婚礼证婚词
2014/01/12 职场文书
入党自荐书范文
2014/03/09 职场文书
早读课迟到检讨书
2014/09/25 职场文书
语文教师求职信范文
2015/03/20 职场文书
检讨书格式范文
2015/05/07 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript