`

js判断鼠标位置是否在某个div中

 
阅读更多
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发onmouseout事件,这样div中的内容就不能操作了。解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。
就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了。
[javascript] view plaincopyprint?

    div.onmouseout=function(event){ 
                        var div = document.getElementById("test"); 
                    <span style="color:#FF6600;">var x=event.clientX; 
                        var y=event.clientY; 
                        var divx1 = div.offsetLeft; 
                        var divy1 = div.offsetTop; 
                        var divx2 = div.offsetLeft + div.offsetWidth; 
                        var divy2 = div.offsetTop + div.offsetHeight;  </span> 
                        if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ 
                                        //如果离开,则执行。。 
                                    } 

后面为一些常用属性方便查找:
clientHeight     获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。  
clientLeft     获取    offsetLeft     属性和客户区域的实际左边之间的距离。
clientTop     获取    offsetTop     属性和客户区域的实际顶端之间的距离。
clientWidth     获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的高度。
offsetLeft     获取对象相对于版面或由    offsetParent     属性指定的父坐标的计算左侧位置。
offsetParent     获取定义对象    offsetTop     和    offsetLeft     属性的容器对象的引用。
offsetTop     获取对象相对于版面或由    offsetTop     属性指定的父坐标的计算顶端位置。
offsetWidth     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的宽度。
offsetX     设置或获取鼠标指针位置相对于触发事件的对象的    x     坐标。
offsetY     设置或获取鼠标指针位置相对于触发事件的对象的    y     坐标。
clientX,clientY   鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth    (包括边线的宽)
网页可见区域高: document.body.offsetHeight   (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
分享到:
评论

相关推荐

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

    综合上述内容,可以得出JavaScript判断鼠标位置是否在特定div中的方法主要是通过获取鼠标事件的坐标信息,并结合元素的位置和尺寸属性来判断。通过这种方式,我们可以为用户提供更加丰富和动态的交互体验。

    js实现鼠标滑动到某个div禁止滚动

    关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能,这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如,在一个产品...

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

    本文将介绍三种不同的方法来判断鼠标是否在`&lt;div&gt;`区域内,并讨论它们的优缺点。 方法一:使用`mouseover`和`mouseout`事件 这种方法是通过为`&lt;div&gt;`元素添加`onMouseOver`和`onMouseOut`事件监听器来实现的。当...

    两个js鼠标提示的例子

    在JavaScript(js)编程中,鼠标提示(Tooltip)是一种常见的用户界面元素,它可以在鼠标悬停在特定元素上时显示额外的信息。本话题主要探讨两个JavaScript实现鼠标提示的例子,通过`mouseTip.htm`和`mouseEvent....

    完整版检测鼠标离开事件.e.rar

    在IT领域,鼠标离开事件(Mouse Leave Event)是用户界面编程中的一个重要概念,尤其是在Web开发和桌面应用程序设计中。这个事件通常与鼠标的焦点转移有关,当鼠标指针离开某个特定元素或区域时触发。本资源"完整版...

    Javascript实现的类似Google的Div拖动效果代码

    函数通过比较鼠标事件对象中的`clientX`和`clientY`坐标与元素的位置信息来判断鼠标是否在元素内部。 知识点五:拖动操作的实现 文件中定义了一个名为`Drag`的对象,这个对象包含了一系列的方法和属性,用于处理...

    《用JavaScript得到鼠标指针的位置》(高清晰pdf版)

    - 事件监听器的基础知识及其在捕获鼠标位置中的应用。 - 在不同浏览器环境下(如IE、Firefox、Chrome等)实现一致性的解决方案。 - 获取鼠标相对于页面或特定元素的坐标的方法。 - 使用DOM操作来动态更新用户界面上...

    javascript实现在某个元素上阻挡鼠标右键大事的方法和实例_.docx

    - 在`customContextMenu`函数中,通过判断`event.preventDefault`是否存在来选择使用哪种方式阻止默认行为。这样可以确保代码的跨浏览器兼容性。 - 使用`document.onmousedown`监听器来控制自定义菜单的显示与隐藏,...

    js小技巧:当鼠标移上文字弹出层

    在网页设计中,为了提升用户体验并增加交互性,开发者经常会在用户鼠标悬停在某个元素(如文字或图片)上时显示额外的信息。这种效果可以通过多种技术实现,而JavaScript作为一种强大的客户端脚本语言,提供了丰富的...

    jquery实现鼠标移动开窗效果

    在该事件处理函数中,我们可以添加逻辑来判断鼠标位置是否满足展示开窗的条件。例如,我们可能希望当鼠标移动到页面某个区域时才显示窗口: ```javascript $(document).ready(function() { var popup = $("#...

    js实现跟随鼠标移动的小球

    在JavaScript编程中,有时我们需要创建动态的交互效果,例如让某个元素跟随鼠标的移动而移动。这个场景在网页游戏、动态界面设计等场合非常常见。本文将深入解析如何使用JavaScript实现一个跟随鼠标移动的小球效果。...

    JS实现的ToolTip提示框

    当用户将鼠标悬停在某个元素上时,会出现一个包含该元素相关信息的小窗口,帮助用户更好地理解或操作。本案例通过纯JavaScript实现了自定义的ToolTip效果,并且支持跨平台应用。 #### 二、重要特性 - **无刷新效果*...

    JS 实现Div向上浮动的实现代码

    `newsScroll`函数会根据当前位置判断div是否已经超出屏幕可视高度,如果超出,则将div元素移动到屏幕底部,并重新开始浮动;如果没有超出,则每隔300毫秒将div元素向上移动15像素。 `clearTimeInterval`和`...

    js 创建一个浮动div的代码

    标题和描述中提到的知识点涉及JavaScript编程,特别是如何使用JavaScript代码来创建一个可以在网页上浮动的div元素,并且具备一些交互功能,如点击事件以及条件判断。 1. **创建浮动div**: JavaScript可以动态地...

    【JavaScript源代码】JS实现元素的拖动与占位功能.docx

    在JavaScript中,我们需要监听鼠标事件来处理拖动行为。以下是一些核心步骤: 1. **初始化**:为每个模块设置一个 `index` 属性,以便后续判断元素移动的合法性。例如,元素只能移动到它所在模块的下一个模块。 2....

    可自由拖动的层js效果,

    2. **元素位置的计算**:在`mousemove`事件中,我们需要计算鼠标的当前位置与拖动开始时的位置之间的差值,然后将这个差值应用到被拖动元素的CSS `top`和`left`属性,从而改变元素的位置。 3. **限制拖动范围**:...

    javascript制作五子棋游戏

    在JavaScript中,我们可以创建一个15x15的二维数组,每个元素代表棋盘上的一个位置,初始值为空。 ```javascript let board = new Array(15).fill().map(() =&gt; new Array(15).fill(null)); ``` 接下来,我们需要...

    鼠标划过图片切换

    其中,一个常见的交互效果就是当用户将鼠标悬停在某个元素(如图片或按钮)上时,页面的某些部分会相应地发生变化,这种效果被称为“鼠标划过图片切换”。这种效果广泛应用于导航菜单、产品展示、广告横幅等场景,...

Global site tag (gtag.js) - Google Analytics