鼠标光标位置 [英] mouse cursor position
问题描述
如何在Mozilla浏览器中获取鼠标光标的坐标为
以及Opera和IE6？
我很难理解如何捕获鼠标移动事件与
Mozilla / Netscape / Firefox和我已经用Google搜索了我的大脑疼痛。
http://www.ghpkendal.co.uk/TestPages/Test.htm
将光标移到黄色区域，您应该看到上面回显的鼠标
坐标。
以下javascript函数适用于Opera和IE6由
onMouseMove =" moveDiv（）"调用。如何调整它以应对上面提到的浏览器版本
？
下面列出了相关的代码段。我没有包含任何功能
检测以保持简单。
divX& divY是测试页面中本地声明的数值变量。
''cpos''是< div>的ID。用于显示鼠标光标的元素
坐标。
功能运动（）
{
divX = event.x
divY = event.y
document.getElementById（''cpos''）。innerHTML =" X =" + divX +"< br> Y =" + divY
}
2004年11月12日星期五09:25:31 -0000，Danny @ Kendal
< da *** @ STOPSPAMghpkendal.co.uk>写道：
如何在Mozilla浏览器中获取鼠标光标的坐标以及Opera和IE6？
[snip]
divX& divY是测试页面中本地声明的数值变量。
不，他们不是。他们是全球宣布的。
[snip]
功能运动（）
{div / divx = event.x
divY = event.y
第一个问题是你正在访问事件对象，好像它是
全球。虽然在IE中可能会出现这种情况，并且浏览器会模仿它的兼容性（如Opera），但Netscape仿真/符合DOM的浏览器
必须使用本地事件对象。如果直接添加事件监听器，
此对象将作为参数传递。在通过
HTML添加的内部事件中，有一个名为event的隐式局部变量。非常方便，因为这允许：
... onmousemove =" movement（event）;" ...
适用于IE和符合标准的浏览器。
这可能会将您的代码更改为：
函数运动（evt）{
var divX = evt.x，
divY = evt.y;
/ * [写输出] * /
}
然而，还有一个问题：x和y不是标准
事件对象的属性。 W3C为浏览器视口中的坐标
定义了clientX / Y.你可以逃脱：
var divX = evt.x || evt.clientX，
divY = evt.y || evt.clientY;
但更复杂的东西可能更可靠。
var movement =（function（e）{
/ *默认的getCoordinates（gC）函数。如果不支持
* Microsoft或DOM方法，这将是
*用于始终返回（0,0）。
* /
函数gC（e）{return {x：0，y：0};}
/ * DOM getCoordinates（dC）函数。* /
函数dC（e）{return {x：e.clientX，y：e.clientY};}
/ * Microsoft getCoordinates（mC）函数。* /
函数mC（e）{return {x：ex，y：ex};}
/ *测试是否给定的参数是一个数字。* /
函数是N（o）{return''number''== typeof o;}
/ * Check如果clientX和clientY事件属性支持
*。如果是，请将默认值gC替换为dC。
* /
if （isN（e.clientX）&& isN（e.clientY））{gC = dC;}
/ *如果没有，请再试一次x和y属性并且如果成功则用mC替换
* gC。
* /
else if（isN（e.x）&& isN（ex））{gC = mC;}
/ *现在我们的测试已经完成，用简化的方式替换最初的
*函数版本并调用它。
* /
（运动=函数（e）{
var div = gC（e）;
/ * [使用div.x和div.y写输出] * /
}）（e）;
}）;
请注意，如果更改名称，移动，则必须编辑
行
（运动=功能（e）{
相应。
[snip]
测试IE 6，Firefox 0.9.3（必须安装1.0）和Opera
7.54。
希望有所帮助，
Mike
-
Michael Winter
将.invalid替换为.uk通过电子邮件回复。
" Michael Winter" M。****** @ blueyonder.co.invalid>在消息中写道
新闻：opshcl10u4x13kvk @ atlantis ... <块quote class =post_quotes> 2004年11月12日星期五09:25:31 -0000，Danny @ Kendal
< da *** @ STOPSPAMghpkendal.co.uk>写道：
如何在Mozilla浏览器中获取鼠标光标的坐标以及Opera和IE6？
[snip]
你是绝对的美女！非常感谢你*非常时间。
我已经更新了测试页面，所有测试内联使其更清晰
（对我来说） ） 怎么了。它似乎适用于我尝试过的所有浏览器
到目前为止没有丢失任何javascript错误或提醒。
我已将其重命名我将无限期地将其遗留下来以供参考。
http://www.ghpkendal.co.uk/TestPages/MouseCoords.htm
我已打印出你非常有用的回复，以便将来修修补补。我不知道
你可以用这种方式从函数中返回值 - 特别是返回
从一个函数到另一个函数的结果所以你只有一个位置来自
在哪里提取值。
我试过Firefox 1.0 - 非常好的渲染但我更喜欢Opera
界面。我仍然喜欢IE6，但需要更新。
2004年11月12日星期五12:16:41 -0000，Danny @ Kendal
< ;哒*** @ STOPSPAMghpkendal.co.uk>写道：
[snip]
你是绝对的美女！非常感谢您的宝贵时间。
欢迎您。 :)
我已经更新了测试页面，内嵌了所有测试，以便更清楚（对我而言）正在发生的事情。它似乎适用于所有浏览器
我到目前为止尝试过没有丢失任何javascript错误或警报。
不应该。我仍然不喜欢全局变量。
[snip]
我已打印出你非常有用的回复，以便将来修修补补。我并不知道你可以用这种方式从函数中返回值 - 特别是
将结果从一个函数返回到另一个函数，所以你只有一个地方从哪里提取值。
如果有帮助，请考虑这种方式...
使用
定义功能时
函数标识符（/ * ... * /）{
/ * ... * /
}
它类似于
var identifier = function（/ * ... * /）{
/ * ... * /
};
也就是说，你创建一个变量，标识符，并为它分配一个函数。
现在，函数是对象，就像其他对象一样，你可以使用多个标识符来引用同一个对象。
结合这两个原则在一起，你可以看到你可以将一些函数A的引用赋给
一些其他
函数的标识符B.B和A现在都引用对于相同的函数[1]，所以你
可以使用任一标识符调用该函数。如果你根据某些条件做出这个任务
，你可以创建一个自我配置的系统：如果你确定一个函数不适合特定的动作，
用另一个替换它。
自从理查德·科尔福德不久前给出了这个想法的非常好的展示，
这是我想的很多东西。
我试过Firefox 1.0 - 非常好的渲染，但我更喜欢Opera
界面。
我也是。我保留了Mozilla（几个版本）和Firefox进行测试。
我仍然喜欢IE6 [...]
就在我想的时候对你有希望。 ：P
祝你好运，
Mike
[1]如果标识符B是对第二个的唯一引用功能，
该功能将被销毁。那就是：
函数A（）{} // 1
函数B（）{} // 2
B = A;
函数2不能再被访问，因为它没有引用它，所以在下一个垃圾收集中删除了
循环。
-
Michael Winter
替换.invalid与.uk通过电子邮件回复。
How can I get the coordinates of the mouse cursor in Mozilla browsers as
well as Opera and IE6?
I''m struggling to understand how to capture mouse movement events with
Mozilla/Netscape/Firefox and I''ve Googled so much my brain hurts.
http://www.ghpkendal.co.uk/TestPages/Test.htm
Move your cursor over the yellow area and you should see the mouse
coordinates echoed above.
The following javascript function works for Opera and IE6 when called by
onMouseMove="moveDiv()". How do I adapt it to cope with the browser versions
mentioned above?
The code snippet in question is listed below. I''ve not included any feature
detection to keep things simple.
divX & divY are locally declared numerical variables in the test page.
''cpos'' is the ID of a <div> element used to display the mouse cursor
coordinates.
function movement()
{
divX = event.x
divY = event.y
document.getElementById(''cpos'').innerHTML = "X=" + divX + "<br>Y=" + divY
}
On Fri, 12 Nov 2004 09:25:31 -0000, Danny@Kendal
<da***@STOPSPAMghpkendal.co.uk> wrote:
How can I get the coordinates of the mouse cursor in Mozilla browsers as
well as Opera and IE6?
[snip]
divX & divY are locally declared numerical variables in the test page.
No, they aren''t. They''re globally declared.
[snip]
function movement()
{
divX = event.x
divY = event.y
The first problem is that you''re accessing the event object as though it''s
global. Whilst this might be true in IE, and browsers that emulate it for
compatibility (like Opera), Netscape-emulating/DOM-conforming browsers
must use a local event object. If the event listener is added directly,
this object is passed as an argument. In intrinsic events added through
HTML, there is an implicit local variable called "event". Quite
conveniently really, as this allows for:
... onmousemove="movement(event);" ...
which will work with both IE and conforming browsers.
That could change your code to:
function movement(evt) {
var divX = evt.x,
divY = evt.y;
/* [write output] */
}
However, there''s still one more problem: x and y aren''t standard
properties of the event object. The W3C defines clientX/Y for coordinates
within the browser viewport. You could get away with:
var divX = evt.x || evt.clientX,
divY = evt.y || evt.clientY;
but something more complex may be more reliable.
var movement = (function(e) {
/* The default getCoordinates (gC) function. If neither the
* Microsoft or DOM approach is deemed supported, this will be
* used to always return (0, 0).
*/
function gC(e) {return {x: 0, y: 0};}
/* The DOM getCoordinates (dC) function. */
function dC(e) {return {x: e.clientX, y: e.clientY};}
/* The Microsoft getCoordinates (mC) function. */
function mC(e) {return {x: e.x, y: e.x};}
/* Tests if the given argument is a number. */
function isN(o) {return ''number'' == typeof o;}
/* Check if the clientX and clientY event properties are
* supported. If so, replace the default, gC, with dC.
*/
if(isN(e.clientX) && isN(e.clientY)) {gC = dC;}
/* If not, try again with the x and y properties and replace
* gC with mC if successful.
*/
else if(isN(e.x) && isN(e.x)) {gC = mC;}
/* Now our testing is out of the way, replace the initial
* function with a streamlined version and call it.
*/
(movement = function(e) {
var div = gC(e);
/* [write output using div.x and div.y] */
})(e);
});
Please be aware that if you change the name, movement, you must edit the
line
(movement = function(e) {
accordingly.
[snip]
Tested on IE 6, Firefox 0.9.3 (must get round to install 1.0) and Opera
7.54.
Hope that helps,
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:opshcl10u4x13kvk@atlantis...On Fri, 12 Nov 2004 09:25:31 -0000, Danny@Kendal
<da***@STOPSPAMghpkendal.co.uk> wrote:How can I get the coordinates of the mouse cursor in Mozilla browsers as
well as Opera and IE6?
[snip]
You absolute feckin'' beauty! Thank you *very* much for your time.
I''ve updated the test page with all the testing inlined to make it clearer
(to me) what is happening. It seems to work in all the browsers I''ve tried
so far without throwing up any javascript errors or alerts.
I''ve renamed it and I''ll leave it up indefinitely for reference.
http://www.ghpkendal.co.uk/TestPages/MouseCoords.htm
I''ve printed out your very helpful reply for future tinkering. I didn''t know
you could return values from a function in that way - particularly returning
the results from one function into another so you only have one place from
where to extract the values.
I''ve tried Firefox 1.0 - very nice rendering but I prefer the Opera
interface. I still like IE6 but it needs updating.
On Fri, 12 Nov 2004 12:16:41 -0000, Danny@Kendal
<da***@STOPSPAMghpkendal.co.uk> wrote:
[snip]
You absolute feckin'' beauty! Thank you *very* much for your time.
You''re welcome. :)
I''ve updated the test page with all the testing inlined to make it
clearer (to me) what is happening. It seems to work in all the browsers
I''ve tried so far without throwing up any javascript errors or alerts.
It shouldn''t. I still don''t like the global variables.
[snip]
I''ve printed out your very helpful reply for future tinkering. I didn''t
know you could return values from a function in that way - particularly
returning the results from one function into another so you only have
one place from where to extract the values.
If it helps, consider it this way...
When you define a function using
function identifier(/* ... */) {
/* ... */
}
it''s analogous to
var identifier = function(/* ... */) {
/* ... */
};
That is, you create a variable, identifier, and assign a function to it.
Now, functions are objects and, just like with other objects, you can use
more than one identifier to refer to the same object.
Combining those two principles together, you can see that you could assign
the reference to some function, A, to the identifier of some other
function, B. Both A and B would now refer to the same function[1], so you
can call that function with either identifier. If you make that assignment
based on some condition, you can create a self-configuring system: if you
determine that one function isn''t appropriate for a specific action,
replace it with another that is.
Since Richard Cornford gave a very nice display of this idea a while ago,
it''s something I think about a lot.
I''ve tried Firefox 1.0 - very nice rendering but I prefer the Opera
interface.
Me, too. I keep Mozilla (several versions) and Firefox for testing.
I still like IE6 [...]
And just when I thought there was hope for you. :P
Good luck,
Mike
[1] If the identifier, B, was the only reference to the second function,
that function will be destroyed. That is:
function A() {} // 1
function B() {} // 2
B = A;
Function 2 can''t be accessed any more as nothing refers to it, so it''s
deleted on the next garbage collection cycle.
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
这篇关于鼠标光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
