首页 web前端 js教程 如何判断鼠标是否在DIV的区域内_javascript技巧

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

May 16, 2016 pm 05:15 PM
div 鼠标

今天研究了一下这个问题,也普及了一下知识吧。

方法一:

通过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";
 }

复制代码 代码如下:

       onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
 


方法二:
复制代码 代码如下:

function   checkIn(e){
var   x=window.event.clientX;
var   y=window.event.clientY;
var   str= ' ';
for(i=0;i             var   obj=document.body.children[i];
          if(x> obj.offsetLeft
                                  &&x                           &&y> obj.offsetTop
                        &&y                 str+= ' \n ';
          }else{
                str+= ' \n ';
        }
  }
alert(str);
}
document.onclick=checkIn

方法三:

这个方法是最简单的实用的。

复制代码 代码如下:

if(myDiv.contains(window.event.srcElement))

即 if(myDiv.contains(鼠标位置的元素对象))

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Feb 29, 2024 pm 03:20 PM

本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的,当用户将鼠标指针悬停在任务栏上的应用程序图标上时,会显示该应用程序的当前窗口缩略图。然而,有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验,因此想要关闭它。任务栏缩略图可能很有趣,但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率,您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源,因此,如果您一直在寻找一种提高资源效率的方法,我们将向您展示如何禁用它。不过

雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架,套装价 1549 元 雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架,套装价 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息,雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元,包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品,2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色,印有这三只宝可梦和精灵球的线条轮廓,中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现,雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g,搭载雷蛇第二代FOC

Microsoft Word无法使用鼠标选择或突出显示文本 Microsoft Word无法使用鼠标选择或突出显示文本 Feb 20, 2024 am 09:54 AM

这篇文章探讨了在MicrosoftWord中鼠标无法选择或突出显示文本时可能出现的问题,以及如何解决这些问题。为什么我无法在MicrosoftWord中选择文本?在MSWord中无法选择文本可能受多种原因影响,如权限限制、文档受保护、鼠标驱动问题或文件损坏。以下将提供解决这些问题的方法。修复MicrosoftWord无法使用鼠标选择或突出显示文本如果MicrosoftWord无法使用鼠标选择或突出显示文本,请遵循下面提到的解决方案:确保您的鼠标左键正在工作检查您是否有资格更改该文件更新鼠标的驱动

惠普推出 Professor 1 三模轻音鼠标:4000DPI、蓝影 RAW3220,首发价 99 元 惠普推出 Professor 1 三模轻音鼠标:4000DPI、蓝影 RAW3220,首发价 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息,惠普近日在京东上架了一款Professor1三模蓝牙鼠标,可选黑白奶茶色,首发价99元,需要支付10元定金。据介绍,这款鼠标重量106克,采用人体工程学设计,尺寸为127.02x79.59x51.15mm,可选七档4000DPI,搭载蓝影RAW3220传感器,使用650毫安时电池,号称一次充电续航可以使用2个月。本站附鼠标参数信息如下:

VGN 联名《艾尔登法环》键鼠系列产品上架:菈妮 / 褪色者定制主题,首发 99 元起 VGN 联名《艾尔登法环》键鼠系列产品上架:菈妮 / 褪色者定制主题,首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息,VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品,包含键盘、鼠标和鼠标垫,采用菈妮/褪色者定制主题设计,目前系列产品已上架京东,售价99元起。本站附联名新品信息如下:VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳,辅以五层消音结构,使用GASKET板簧结构,拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板;支持三模连接和SMARTSPEEDX低延迟技术;接入VHUB,可一站式管理多款设备,首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

雷蛇鼠标驱动在哪个文件夹 雷蛇鼠标驱动在哪个文件夹 Mar 02, 2024 pm 01:28 PM

很多用户不知道自己雷蛇驱动安装的文件去了哪里,这些驱动文件一般都是安装在了系统盘,也就是电脑的C盘,具体位置在programfiles下的RAZE文件夹。雷蛇鼠标驱动在哪个文件夹答:在系统C盘的programfiles下的RAZE文件夹。一般驱动都会安装在C盘,按照位置去找就可以了。雷蛇鼠标驱动安装方法介绍1、下载好官网的文件以后双击运行自己下载的EXE文件。2、等待软件加载。3、在这里可以选择你要安装的哪个驱动。4、选择好以后点击右下角的“安装”就可以了。

鼠标cpi是什么意思 鼠标cpi是什么意思 Feb 12, 2024 pm 09:40 PM

CPI又叫做countperinch,鼠标中的CPI就是鼠标的灵敏度的高低,在使用的时候CPI数字越高说明鼠标越灵敏,现在小编在本篇文章中给大家带来了鼠标cpi按钮功能介绍。cpi含义x和y轴含义左键变成右键滚轮上下失灵灵敏度怎么调鼠标不动恢复鼠标cpi是什么意思答案:动态移动中每英寸反馈回来的坐标点数,就是鼠标的灵敏度的高低。按钮功能介绍:1、调节鼠标的移动速度按键;2、通过按cpi键调节鼠标灵敏度;3、衡量鼠标灵敏度的动态指标;4、可对CPI在500/1000CPI之间自由调节;

我的鼠标为什么无法被罗技驱动程序识别 我的鼠标为什么无法被罗技驱动程序识别 Jan 16, 2024 pm 02:45 PM

如果罗技的驱动在使用时遇到了无法识别鼠标或检测不到鼠标的问题,可能是由于鼠标或接口故障,或者安装的驱动版本错误。请检查鼠标和接口的连接,尝试更新正确的驱动版本。罗技驱动为什么无法识别我的鼠标:一、可能是鼠标或者接口的问题1、要确定用户的鼠标是不是正版的罗技鼠标,不确定可以去咨询罗技的售后客服。2、用户可以检查下电脑的USB接口和鼠标连接线是否正常,否则也会影响罗技驱动的识别。二、可能是驱动版本不对1、罗技驱动的最新版无法识别旧的设备,因此使用旧版鼠标就无法被识别。2、同样使用新版鼠标也无法被旧的

See all articles