Getting javascript mouse position relative to website prefferably without jQuery
I've found this snippet on Ajaxian, but I can't seem to use the cursor.y (or cursor.x) as a variable and when the function is called as such it does not seem to work. Is there a syntax problem or something else?开发者_开发知识库
function getPosition(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX +
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY +
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
I'd preffer not to use jQuery UI if possible, since I've always thaught of jQuery and librarys as a bit of an overkill for most JS programing.
This has always been difficult to achieve cross-browser, but this is about as good as you can get...
<!DOCTYPE html>
<html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
window.onload = function() {
document.onmousemove = function(e) {
if(!e) e = window.event;
if(e.pageX == null && e.clientX != null) {
var doc = document.documentElement, body = document.body;
e.pageX = e.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
e.pageY = e.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY;
}
}
</script>
</head>
<body>
<h1>Position: <span id="pos">0, 0</span></h1>
</body>
</html>
This snippet must be called inside a mouse event handler, with the event object from the handler.
//edit//Just in case I misunderstood you can not set the mouse's physical position in javascript.
So I found an answer kind of on here so I shall Simply Link to it for study purposes. Show mouse x and y position with javascript
Edited----Wanted to share what worked for me.
This is a form of the code I found at above link I changed slightly. It seems as though I must put certain things to window.onload.
window.onload = function () {
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!IE) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousemove = function (e) {mousePos(e);};
document.onmousedown = function (e) {mouseClicked();};
};
var mouseClick;
var keyClicked;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!IE) {
mouseX = e.pageX;
mouseY = e.pageY;
}else{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}
加载中,请稍侯......
精彩评论