如何判断鼠标是否在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实现自动变换的菜单效果代码
Sep 09 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Pandas的数据过滤实现
2021/01/15 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
标准化管理实施方案
2014/02/25 职场文书
2015年化验员工作总结
2015/04/10 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
go:垃圾回收GC触发条件详解
2021/04/24 Golang
实战Python爬虫爬取酷我音乐
2022/04/11 Python