如何判断鼠标是否在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 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
详解如何运行vue项目
Apr 15 Javascript
Vue调用后端java接口的实例代码
Oct 28 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python单例模式的两种实现方法
2017/08/14 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
外科实习自我鉴定
2013/10/06 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
教师网络培训感言
2014/03/09 职场文书
出纳员岗位职责
2014/03/13 职场文书
关于运动会的广播稿
2014/09/22 职场文书
法定授权委托证明书
2014/09/27 职场文书
碧霞祠导游词
2015/02/09 职场文书
博士导师推荐信
2015/03/25 职场文书
葬礼主持词
2015/07/02 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
python中super()函数的理解与基本使用
2021/08/30 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技