`

JS 鼠标相对document的坐标以及HTML元素相对document的坐标

阅读更多

	Number.prototype.NaN0 = function(){
		return isNaN(this)?0:this;//如果this为非数字返回0,否则返回数字
	}
//获取鼠标相对document的坐标
	function getMouseCoord(evt){
		if(evt.pageX && evt.pageY)
			return {x:evt.pageX,y:pageY};
		return {
			x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,
			y:evt.clientY + document.body.scrollTop - document.body.clientTop
		};
	}

//获取HTML元素相对document的坐标
	function getPosition(ele){
		var x = ele.offsetLeft+(ele.curentStyle?(parseInt(ele.curentStyle.borderLeftWidth).NaN0()):0);
		var y = ele.offsetTop+(ele.curentStyle?(parentInt(ele.curentStyle.borderTopWidth).NaN0()):0);
		while(ele.offsetParent){
			ele = ele.offsetParent;
			x+=ele.offsetLeft+(ele.curentStyle?(parseInt(ele.curentStyle.borderLeftWidth).NaN0()):0);
			y+=ele.offsetTop+(ele.curentStyle?(parentInt(ele.curentStyle.borderTopWidth).NaN0()):0);
		}
		return {x:x,y:y};
	}

//获取鼠标相对与点击空件上的坐标
	function getMouseOffset(target,ev){
		var elePosition = getPosition(target);
		var mouseCoord = getMouseCoord(ev);
		return {x:mouseCoord.x-elePosition.x,y:mouseCoord.y-elePosition.y};
	}
 
分享到:
评论
1 楼 jidifeiyan 2010-11-16  
今天也碰到了这个问题,看了这篇文章解决了,不错。

相关推荐

    javascript获取鼠标当前位置坐标并显示

    ### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标,并实时显示这些坐标值。该功能主要涉及到以下几个知识点: 1. **事件监听器...

    获取鼠标相对位置

    标题“获取鼠标相对位置”指的是在编程环境中,特别是在图形用户界面(GUI)开发中,如何获取鼠标在屏幕或特定元素上的坐标位置。这个知识点对于实现交互式应用,如拖放功能、点击事件处理或者画布绘图等至关重要。...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    JS 控制鼠标相对区域范围

    "JS 控制鼠标相对区域范围"这个话题主要涉及JavaScript事件处理、DOM操作以及坐标计算。以下是对这个主题的详细解释: 一、JavaScript事件处理 1. `addEventListener`: 这是JavaScript用于添加事件监听器的方法,...

    JQuery获取鼠标坐标

    本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标,包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作,提供了强大的选择器和事件处理...

    Javascript获取鼠标坐标的各种类型

    对于鼠标在特定容器内的相对坐标,`event.offsetX`和`event.offsetY`则非常有用,它们返回鼠标相对于事件源元素的左上角的坐标。 当需要考虑整个文档的滚动时,可以通过`document.documentElement.scrollTop`获取...

    javascript获得鼠标的坐标值

    在JavaScript中,获取鼠标的坐标值是一项常见的任务,它在用户交互和动态界面设计中扮演着重要角色。根据描述,我们将讨论两种不同的场景来获取这些坐标:一是相对于`body`元素,二是相对于某个特定的对象。 ### 1....

    随鼠标移动动态显示xy坐标

    - **DOM操作**: 通过修改文档对象模型(Document Object Model)来实现页面元素的动态变化。 ### 2. 使用Esri库进行地图操作 #### Esri库简介 - **Esri**: 一家专注于地理信息系统软件开发的公司,提供了一系列...

    javascript获得对象的坐标

    根据给定文件的信息,本文将深入探讨如何使用JavaScript获取页面元素的坐标位置。这是一项非常实用的技术,在网页开发中有着广泛的应用场景,比如在实现拖拽功能、元素定位或者响应式设计时,都需要准确地知道元素的...

    鼠标事件演示鼠标的实时坐标,鼠标触发事件

    在这个名为“鼠标事件演示鼠标的实时坐标,鼠标触发事件”的项目中,我们将深入探讨鼠标事件和如何获取鼠标的实时坐标。 首先,让我们了解什么是鼠标事件。在大多数编程语言中,鼠标事件是当用户与屏幕上的元素进行...

    网页实现全屏获取鼠标坐标

    `event.clientX`和`event.clientY`分别代表鼠标在当前视口内的X和Y坐标,但这些坐标是相对浏览器窗口的,而不是全屏的。 为了实现全屏获取鼠标坐标,我们需要考虑以下几个步骤: 1. **监听事件**:在页面加载完成...

    显示鼠标坐标信息 JavaScript代码

    JavaScript 提供了这样的能力,让我们能够轻松获取鼠标的坐标信息。本文将详细介绍如何使用 JavaScript 来实现这个功能,并提供一个实际的示例代码。 首先,我们需要了解在浏览器环境中,鼠标坐标可以通过事件对象...

    JS使用百分比确定图标坐标点击事件Demo

    为了确保在不同浏览器之间的兼容性,可以使用`window.innerWidth`和`window.innerHeight`来获取视口尺寸,以及`event.clientX`和`event.clientY`来获取鼠标点击的坐标。 这个"JS使用百分比确定图标坐标点击事件Demo...

    火狐兼容获取鼠标的坐标

    在Web开发中,特别是在JavaScript编程中,获取鼠标坐标是一项常见的需求,用于实现各种交互效果,如拖放功能、点击位置分析等。在不同的浏览器中,实现这一功能的方法可能有所不同,因此需要进行兼容性处理。以下是...

    (彬)泪闯天涯-取网页元素坐标

    获取网页元素坐标的方法有很多,其中最常用的是JavaScript的DOM(Document Object Model)API。在JavaScript中,我们可以使用`getBoundingClientRect()`方法来获取元素的边界信息,包括它的top、right、bottom和left...

    使用JavaScript获取客户端的鼠标坐标信息

    如果你需要获取鼠标相对于某个特定元素的位置,可以使用`event.target`来获取目标元素,并结合`getBoundingClientRect()`方法来计算相对坐标。例如: ```javascript var rect = event.target.getBoundingClientRect...

    js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    在计算机科学中,坐标是一种非常重要的属性,特别是在网页设计和前端开发中,经常需要获取鼠标或者特定元素的位置坐标来执行某些操作。本知识点将详细介绍如何通过JavaScript获取鼠标的坐标位置。JavaScript是一种...

    取得鼠标坐标.rar

    在JavaScript中,我们可以使用`event.clientX`和`event.clientY`属性来获取鼠标的页面坐标。当用户在网页上移动鼠标时,可以在事件监听器中捕获这些值: ```javascript document.addEventListener('mousemove', ...

    js实现网页上dom元素拖动 并实时显示坐标效果.rar

    1. **DOM(Document Object Model)**:DOM是HTML和XML文档的编程接口,它将网页结构表示为树形结构,使得开发者可以通过JavaScript或其他语言与页面元素进行交互。 2. **事件监听**:在实现元素拖动功能时,我们...

    js 动态设置图片的热区并获取图片坐标

    总结来说,动态设置和获取图片热区坐标是通过JavaScript操作HTML图像映射和处理鼠标事件来实现的。理解DOM操作、事件监听以及坐标转换是关键。同时,为了保证广泛的浏览器兼容性,开发者需要考虑对旧版浏览器的适配...

Global site tag (gtag.js) - Google Analytics