如何判断鼠标是否在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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue之a-table中实现清空选中的数据
Nov 07 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
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP7.0版本备注
2015/07/23 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
javascript 闭包
2011/09/15 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python实现自动签到脚本功能
2020/08/20 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
《唯一的听众》教学反思
2014/02/20 职场文书
代办委托书怎样写
2014/04/08 职场文书
土地转让协议书范本
2014/04/15 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
教育见习报告范文
2014/11/03 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技