如何判断鼠标是否在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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
jQuery的三种$()
Dec 30 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
php判断两个浮点数是否相等的方法
2015/03/14 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
详解jQuery中的事件
2016/12/14 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
某公司部分笔试题
2013/11/05 面试题
家长给老师的道歉信
2014/01/13 职场文书
思想品德自我评价
2014/02/04 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Python基础之元类详解
2021/04/29 Python
nginx部署多前端项目的几种方法
2021/05/25 Servers
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
Go语言编译原理之源码调试
2022/08/05 Golang