鼠标坐标,JS获取鼠标坐标

作者: 韦德国际1946国际网址  发布:2019-07-30

JS获取鼠标坐标,获取鼠标像素点的杰出实例,运转本页面后,随便活动鼠标的职位,可及时显现鼠标的坐标点,不占用系统能源。

复制代码 代码如下:

复制代码 代码如下:

后天写的台本在赢得鼠标地点的时候有一点点标题。在IE中一向当有滚动条的时候,开采document.body.scrollTop并从未起到效果与利益。
新生在google中检索到一篇小说Mouse Cursor Position,详细介绍了浏览器鼠标定位的难点。各类浏览器对鼠标定位的正规化不平等,就连不通版本的ie对牢固扶助都不均等。
document.body.scrollLeft,document.body.scrollTop只用于IE6在此以前的本子,在IE6中,对未有发布DOCTYPE,或许发布的是transitional DOCTYPE,那么IE6将采取document.documentElement.scrollLeft 来赢得鼠标的相对化地点。

JavaScript获取鼠标坐标

var restrictX; 
var restrictY; 
var tip; 
// 鼠标坐标  
鼠标坐标,JS获取鼠标坐标。function mousePosition(ev) { 
return { 
韦德国际1946国际网址,        x : ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft, 
        y : ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop 
    }; 

// 鼠标事件  
function mouseMove(ev) { 
    ev = ev || window.event; 
    var mousePos = mousePosition(ev); 
    restrictX = mousePos.x; 
    restrictY = mousePos.y; 

document.onmousemove = mouseMove; 
document.onclick = mouseMove; 

var restrictX; 
var restrictY; 
var tip; 
// 鼠标坐标  
function mousePosition(ev) { 
return { 
        x : ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft, 
        y : ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop 
    }; 

// 鼠标事件  
function mouseMove(ev) { 
    ev = ev || window.event; 
    var mousePos = mousePosition(ev); 
    restrictX = mousePos.x; 
    restrictY = mousePos.y; 

document.onmousemove = mouseMove; 
document.onclick = mouseMove; 

将斯蒂芬 Chapman提供的函数做个记录

源码爱好者

地点的代码在谷歌(Google)和新浪浏览器中拿走的值会不可靠,需实行改换,如下:

上边的代码在谷歌(Google)和腾讯网浏览器中赢得的值会不标准,需进行改换,如下:

function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   return evt.clientY (document.documentElement.scrollTop ?
   document.documentElement.scrollTop :
   document.body.scrollTop);
else return null;
}
Mouse Cursor Position
Join the Discussion
Questions? Comments?
Until recently there was no standard way of determining the position of the mouse cursor within the browser. The W3C standards say that the current mouse cursor position within the browser window when an event is triggered should be given by event.clientX and event.clientY to obtain the distance from the left and top of the browser window respectively.
I have tested this in a number of different browsers and have found that Internet Explorer 6, Netscape 6 , Firefox, and Opera 7 all produce correct values for the mouse coordinates relative to the browser window in these fields. To obtain the position within the web page you would simply add the scroll position of the page within the browser window.
Opera 5 and 6 produced values for these fields but the values are relative to the top of the web page instead of relative to the browser window and so adding the scroll position would produce a wrong result with these browsers. Netscape 4 doesn't understand these fields at all and so would give an error if this code were used by itself.
One added complication is that Internet Explorer uses two different ways to determine the scroll position of the page. It uses document.body.scrollLeft and document.body.scrollTop in versions before version 6 as well as in version 6 when there is no DOCTYPE declared or a transitional DOCTYPE is declared. When IE6 is declared using a strict DOCTYPE document.documentElement.scrollLeft and document.documentElenent.scrollTop are used instead. Other browsers either use one of these values or pageXOffset and pageYOffset.
Although not part of the W3C standards there is another pair of fields that will give the position of the mouse cursor that is useful. With the exception of Internet Explorer and Opera 5 and 6, all of the browsers I have mentioned also support event.pageX and event.pageY which give the mouse cursor position relative to the top left corner of the web page itself. Using these fields you do not have to add the scroll position of the page.
By combining tests for both of these methods together we can create code to locate the mouse cursor position that will work on Internet Explorer, Netscape 4 , Firefox, and Opera 7 . You just need to pass the event to the following functions to retrieve the appropriate position on the web page.
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}
There are a couple of other pairs of fields that give mouse cursor positions that are less useful. The fields event.screenX and event.screenY are defined in all of the browsers I tested. They give the position of the mouse cursor relative to the top left corner of the screen. Without knowing the position of the top left corner of the browser window this information is not very useful with respect to being able to interact with the web page.
The fields event.x and event.y also exist in Netscape 4, Internet Explorer, and Opera 7 . In Netscape 4 these fields give the position within the web page exactly the same as the pageX and pageY fields. In Internet Explorer and Opera 8 they give the position of the mouse cursor within the current object (if that object is positioned absolute, relative, or fixed) or within the page (for static objects). Opera 7 appears to use these fields to give the position of the mouse cursor relative to the bottom left corner of the screen.
还要别的的景况:
调用方法:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:鼠标坐标,JS获取鼠标坐标

关键词: 19463331伟德国际