如何判断鼠标是否在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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue 组件简介
Jul 31 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
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python如何读写CSV文件
2020/08/13 Python
Python中的流程控制详解
2021/02/18 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
鼓舞士气的口号
2014/06/16 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
出差报告范文
2014/11/06 职场文书
中英文求职信范文
2015/03/19 职场文书
道歉短信大全
2015/05/12 职场文书
公司考勤管理制度
2015/08/04 职场文书
学习党史心得体会2016
2016/01/23 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS