获取鼠标在网页中的位置

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

 

/**
 * 获取鼠标在页面上的位置
 * @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/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过HTML5的Canvas元素和JavaScript来实现在网页上用鼠标画出自己的名字并获取鼠标移动轨迹。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas Demo</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var isDrawing = false; var mouseMoves = []; canvas.addEventListener("mousedown", function(e) { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop}); }); canvas.addEventListener("mousemove", function(e) { if (isDrawing) { ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop}); } }); canvas.addEventListener("mouseup", function(e) { isDrawing = false; }); // 将 mouseMoves 发送到后台进行处理 </script> </body> </html> ``` 在这个示例代码,我们创建了一个Canvas元素,并绑定了鼠标事件。当用户按下鼠标左键时,我们开始绘制路径,并将路径的起点设置为鼠标当前位置,并将当前位置添加到 `mouseMoves` 数组。当用户移动鼠标时,如果正在绘制路径,则将路径的终点设置为鼠标当前位置,并绘制出路径,同时将当前位置添加到 `mouseMoves` 数组。当用户松开鼠标左键时,停止绘制路径。 最后,我们可以将 `mouseMoves` 数组发送到后台进行处理。 你可以根据自己的需求修改这个示例代码,实现在Canvas上绘制出自己的名字并获取鼠标移动轨迹。需要注意的是,对用户的隐私应该保护,不应该收集任何敏感信息,同时也需要遵守相关的法律法规。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值