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