`

获取鼠标在网页中的位置

 
阅读更多

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

 

/**
 * 获取鼠标在页面上的位置
 * @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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics