如何判断鼠标是否在DIV的区域内
更新时间：2013年11月13日 10:08:52 作者：
通过mouseover，mouseout来触发事件，才判断鼠标是否在该区域。 但是这种方法的局限性就是，必须要触发mouseover，或mouseout，mouseleave事件才能知道
今天研究了一下这个问题，也普及了一下知识吧。
方法一：
通过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中将日期字符串转换为时间戳是一个常见需求,本文介绍了五种实现此转换的方法,包括使用Date对象、正则表达式辅助解析、Date.parse()函数以及第三方库如moment.js和date-fns,这些方法适用于不同格式的日期字符串,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JS 动态判断PC和手机浏览器实现代码的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了JavaScript函数的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
这篇文章主要介绍了BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法,下面通过本文给大家详细说明一下，需要的朋友可以参考下2016-12-12
在js中,对象是键值对的集合,可以通过很多种方式创建； 本文给大家介绍了六种创建方式：对象字面量、构造函数、Object.create()、工厂函数、class、单例模式,需要的朋友可以参考下2025-04-04
js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Null,Undefined）,和一种混合数据类型（Object）。下面就跟着小编一起来看下吧2016-12-12
微信小程序使用 official-account 组件实现一键跳转公众号
本文详细介绍了如何在微信小程序中实现一键跳转到公众号的功能,包括准备工作、使用`<official-account>`组件实现跳转、关联小程序与公众号的方法,以及常见错误及解决方案,通过本文的指导,开发者可以顺利实现这一功能,提升用户体验2024-11-11
这篇文章主要介绍了原生js如何实现表单验证功能，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了JS实现随机生成10个手机号的方法,涉及javascript数值运算与随机数操作相关使用技巧,需要的朋友可以参考下2018-12-12
BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）
这篇文章主要介绍了BootStrap Table实现server分页序号连续显示功能（当前页从上一页的结束序号开始）,需要的朋友可以参考下2017-09-09
最新评论