`

获取鼠标在网页中的位置

 
阅读更多

很多时候需要获取鼠标在网页中的位置,而不是鼠标在屏幕中的位置,在网页中的位置还要考虑到网页的下拉条,在网上偶然找到相关代码,在此写一下,以防止忘记,废话少说,上代码:

 

/**
 * 获取鼠标在页面上的位置
 * @param ev		触发的事件
 * @return			x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
 */
function getMousePoint(ev) {
	var point = {
		x:0,
		y:0
	};

	if(typeof window.pageYOffset != 'undefined') {
		point.x = window.pageXOffset;
		point.y = window.pageYOffset;
	}
	else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
		point.x = document.documentElement.scrollLeft;
		point.y = document.documentElement.scrollTop;
	}
	else if(typeof document.body != 'undefined') {
		point.x = document.body.scrollLeft;
		point.y = document.body.scrollTop;
	}

	point.x += ev.clientX;
	point.y += ev.clientY;

	return point;
}

 

function addEvent(node, type, listener) {
	if(node.addEventListener) {
		node.addEventListener(type, listener, false);
		return true;
	} else if(node.attachEvent) {
		node['e' + type + listener] = listener;
		node[type + listener] = function() {
			node['e' + type + listener](window.event);
		};
		node.attachEvent('on' + type, node[type + listener]);
		return true;
	}
	return false;
}

//var container = document.getElementById('container');
//var viewport = document.getElementById('viewport');
//var cursorX = document.getElementById('cursor-x');
//var cursorY = document.getElementById('cursor-y');
addEvent(container, 'mousedown', function(ev){
	var cursorPos = getMousePoint(ev);
	//viewport.style.left = cursorPos.x + 'px';
	//viewport.style.top = cursorPos.y + 'px';
	//alert(cursorPos.x);
	alert(“纵坐标是:”+cursorPos.y);
	
});

 mousedown  是指鼠标事件,也可以改成其他事件

这个是demo:http://www.neoease.com/tutorials/cursor-position/

1
2
分享到:
评论

相关推荐

    获取鼠标在页面上的位置(包括滚动条)

    ### 获取鼠标在页面上的位置(包括滚动条) #### 概述 在网页开发过程中,有时候我们需要获取用户鼠标在页面上的具体位置,特别是当页面存在滚动条时,这将有助于实现某些交互功能,如动态提示、点击反馈等。本文...

    鼠标位置 鼠标在屏幕的位置 坐标

    在Visual Basic for Applications (VBA) 或 Visual Basic 6 (VB6) 这样的环境中,获取鼠标位置可以通过调用Windows API函数实现。例如,在给定的部分内容中,通过声明`GetCursorPos`函数并定义`pointapi`类型结构体...

    CSS——ajax特效\获取鼠标位置

    在 Web 开发中,获取鼠标位置是非常重要的一项技术,特别是在交互式网页设计、图像处理、游戏开发等领域。今天,我们将介绍两种使用 CSS 和 Ajax 实现鼠标位置获取的方法。 获取鼠标位置的重要性 在 Web 开发中,...

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

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

    火狐兼容获取鼠标的坐标

    标题“火狐兼容获取鼠标的坐标”涉及到的是在网页开发中如何在Firefox浏览器上获取鼠标指针的位置。在Web开发中,特别是在JavaScript编程中,获取鼠标坐标是一项常见的需求,用于实现各种交互效果,如拖放功能、点击...

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

    标题"网页实现全屏获取鼠标坐标"提示我们关注的核心是实现一个功能,使得无论浏览器窗口大小如何,都能获取到鼠标的全局坐标,包括在窗体外的坐标。 描述中提到"自己制作控件实现网页获取窗体外鼠标坐标",这可能是...

    获取鼠标在文档的坐标位置(兼容多浏览器)

    本文将详细介绍如何通过JavaScript获取鼠标在文档中的坐标位置,并确保该方法能在多种主流浏览器中稳定运行。 #### 一、问题背景 当用户与网页进行交互时,如点击鼠标按钮,页面会触发相应的事件。这些事件携带了...

    获取鼠标实时坐标位置

    下载之后,无需安装,直接点击pyautogu.exe,可以获取鼠标实时坐标位置,辅助支持开发自动化软件、游戏辅助软件、网页自动化、爬虫、游戏外挂等

    获取颜色值小工具 获取鼠标指定任意位置的颜色值

    在"获取颜色值小工具"中,SimpleColorPick.exe是这个程序的主文件,双击运行后,它会在屏幕上显示一个浮动窗口,窗口中会实时更新鼠标当前位置的颜色值。用户可以通过拖动窗口或调整其大小以适应不同的工作需求。...

    获取电脑屏幕上鼠标指针的位置坐标

    在JavaScript中,可以利用`event.clientX`和`event.clientY`属性来获取鼠标位置,但这通常在网页环境中而非桌面应用中使用。 除了编程实现,还有许多现成的工具可以帮助用户获取鼠标坐标。压缩包中的`mousexy.exe`...

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

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

    显示鼠标位置的颜色

    在IT领域,尤其是在软件开发和自动化测试中,有时我们需要获取鼠标指针所在位置的颜色信息,以便于分析屏幕上的像素或进行特定的图像处理任务。"显示鼠标位置的颜色"这一功能通常涉及图形用户界面(GUI)的交互和...

    JQuery获取鼠标坐标

    在IT领域,特别是前端开发中,获取鼠标坐标是一项基本但重要的功能,它广泛应用于各种交互设计、游戏开发、数据采集等场景。通过JQuery或原生JavaScript,开发者可以轻松实现这一功能,为用户提供更加丰富和动态的...

    鼠标在canvas上悬浮,并提示鼠标位置信息

    在事件处理函数内部,我们需要获取鼠标在Canvas上的坐标。由于浏览器的事件对象提供了`clientX`和`clientY`属性,表示鼠标在视口中的位置,但这些坐标并不直接对应于Canvas的像素坐标,我们需要将它们转换为Canvas的...

    C#获取鼠标坐标源码

    在Windows Forms中,我们主要通过控件的鼠标事件来获取鼠标位置。例如,`MouseMove`事件可以在鼠标在控件上移动时触发,`MouseClick`或`MouseDown`事件则提供了鼠标点击时的坐标信息。在WPF中,情况类似,但事件处理...

    C#获取鼠标坐标源码_(0601).rar

    这个压缩包"**C#获取鼠标坐标源码_(0601).rar**"很可能包含了一个示例程序,用于演示如何在C#环境中实时监测并获取鼠标的当前位置。以下是对这个主题的详细说明: 首先,C#中的`System.Windows.Forms`命名空间提供...

    C++实现WebBrowser控件中获取鼠标点击事件和超链接

    在C++编程中,WebBrowser控件是一种常用的组件,它允许开发者在应用程序中嵌入一个浏览器引擎,以显示网页内容并交互。MFC(Microsoft Foundation Classes)是C++的一个库,用于构建Windows应用程序,它提供了封装...

    在网页上实现鼠标跟踪

    在这个实验中,`MouseMove`函数被用来获取鼠标的当前位置,`SetPos`函数则用于更新元素的位置。 实验的关键在于JavaScript的事件处理。在HTML文档中,`onload`事件用于指定页面加载完成时执行的函数,这里是`...

    VC++实现WebBrowser控件中获取鼠标点击事件和超链接

    最后,我们可以在ShowContextMenu()方法中获取鼠标点击时的URL。当用户点击链接时,WebBrowser会调用此方法,我们可以检查ID参数来识别是否为链接点击,并从pdispObject获取URL: ```cpp STDMETHODIMP ...

    鼠标移动位置数值的实时显示

    在IT领域,尤其是在网页开发和交互设计中,实时显示鼠标移动位置是一项常见的需求。这个功能可以帮助用户更好地理解和操作界面,特别是在需要精确控制元素位置或进行游戏等应用时。标题"鼠标移动位置数值的实时显示...

Global site tag (gtag.js) - Google Analytics