如何判断鼠标是否在DIV的区域内

 通过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(鼠标位置的元素对象))

具体情况还是要根据自己需要来选择,我是调试了一下方法三,但是具体也没使用上。 其他方法,继续研究中。

时间: 2024-12-02 02:41:57

如何判断鼠标是否在DIV的区域内的相关文章

如何判断鼠标是否在DIV的区域内_javascript技巧

今天研究了一下这个问题,也普及了一下知识吧. 方法一: 通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域. 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道. 复制代码 代码如下: function chkIn()    {  div_1.innerText = "现在你把鼠标移入层了!";  div_1.style.font = "normal black"; }   funct

php+mongodb判断坐标是否在指定多边形区域内的实例_php实例

MongoDB是一个基于分布式文件存储的数据库,并提供创建基于地理空间的索引的能力,本文将提供使用PHP连接mongodb,判断坐标是否在指定多边形区域内的实例. 1.定义多边形区域 多边形的坐标点如下: 113.314882,23.163055 113.355845,23.167042 113.370289,23.149564 113.356779,23.129758 113.338238,23.13913 113.330979,23.124706 113.313588,23.140858 1

php+mongodb判断坐标是否在指定多边形区域内的实例

MongoDB是一个基于分布式文件存储的数据库,并提供创建基于地理空间的索引的能力,本文将提供使用PHP连接mongodb,判断坐标是否在指定多边形区域内的实例. 1.定义多边形区域 多边形的坐标点如下: 113.314882,23.163055 113.355845,23.167042 113.370289,23.149564 113.356779,23.129758 113.338238,23.13913 113.330979,23.124706 113.313588,23.140858 1

js判断鼠标位置是否在某个div中的方法_javascript技巧

本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. -------------------------------------------------------------------------------------------------------------- 成品图:     工具描述: 移动地图时(或改变地图级别时),只显示

JS用斜率判断鼠标进入DIV四个方向的方法_javascript技巧

网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左上角做原点,水平轴作为x轴,往右为正:竖直轴作为y轴,向上为正. 中间的div的左上角坐标(x1,y1),右下角坐标(x2,y2),中心点的坐标(x0,y0). 设如图两点的斜率为k(k<0),关于x轴对称的斜率为-k. 另外鼠标刚移入时,鼠标的坐标设为(x,y): window.onload =

如何判断鼠标当前位置是否在一个div内部?

问题描述 一个按钮(class="myqiehuan"),一个初始隐藏的div(class="qiehuan")需求:1.当鼠标放到(不是点击事件)按钮上时,显示div,当鼠标离开按钮时,隐藏div2.当div被1中的事件触发而显示时,当鼠标在这个div内部时,继续显示这个div,当鼠标离开这个div时,隐藏divJQuery:$(".qiehuan").hover(function(){//对div的处理$(this).show();},fun

利用JS判断鼠标移入元素的方向_javascript技巧

最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend