Fatal编程技术网
  • javascript/
  • 网页上的鼠标移动问题（JavaScript）

网页上的鼠标移动问题（JavaScript）

javascript html scroll

网页上的鼠标移动问题（JavaScript）,javascript,html,scroll,Javascript,Html,Scroll,我有两套代码 以下内容适用于firefox x=e.clientX + document.documentElement.scrollLeft; y=e.clientY +document.documentElement.scrollTop -67; 这在Chrome上有效 x=e.clientX + document.body.scrollLeft ; y=e.clientY + document.body.scrollTop - 67 ; 我尝试合并代码，但在Firefox中无法正常工作

我有两套代码
以下内容适用于firefox

x=e.clientX + document.documentElement.scrollLeft;
y=e.clientY +document.documentElement.scrollTop -67;
这在Chrome上有效

x=e.clientX + document.body.scrollLeft ;
y=e.clientY + document.body.scrollTop - 67 ;
我尝试合并代码，但在Firefox中无法正常工作

    if( document.documentElement){
x=e.clientX + document.documentElement.scrollLeft;
y=e.clientY +document.documentElement.scrollTop -67;
}
if( document.body){
x=e.clientX + document.body.scrollLeft ;
y=e.clientY + document.body.scrollTop - 67 ;
}
为什么会这样

我的html是这样的，这和它有什么关系吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
位置是一件非常痛苦的事情。看起来你必须同时使用它们。jQuery源代码中有非常类似的代码，这可能会有所帮助：

if ( event.pageX == null && event.clientX != null ) {
    var doc = document.documentElement,
        body = document.body;

    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
}
我不知道他们为什么这么做（乍一看，代码看起来不必要的复杂），但我猜这是有原因的，所以你可以尝试做同样的事情。根据您的情况进行调整后，可能会如下所示：

var doc = document.documentElement,
    body = document.body;
x = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
y = e.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0) - 67;
有点离题了：为了定位内容，我真的会使用诸如、、或之类的库。然后，您可以从大量关注代码、许多人使用代码和报告边缘案例等方面获益。

这是由于一个（由于某些原因，它被关闭为WontFix）

你可以像T.J.克劳德说的那样做，但这有点昂贵。您的最佳选择是
功能测试滚动值（但仅在文档准备好之后！）

你的代码就变成了

x = e.clientX + SCROLL_ROOT.scrollLeft;
y = e.clientY + SCROLL_ROOT.scrollTop - 67;
@galambalazs-这段代码在Firefox中似乎不起作用，尽管它在Chrome中工作得很好，但在现实世界中，我怀疑不是这样的：“…它有点贵…”你需要在一个循环中进行数十万次——如果不是数百万次的话——才能看到明显的差异，我怀疑任何这样的循环都会被其他方面所控制。显然，他们每次都这么做是有原因的（尽管正如我所说，我也觉得很奇怪）。@Adi Mathur-确保在文档准备好后运行测试。它在FF4中对我有效。0b11@T.J.Crowder-如果它是一个
mousemove
事件处理程序呢？即使他使用了某种节流/去盎司，效率也不容忽视。它的可读性和可重用性也要高得多。@galambalazs：即使在
mousemove
处理程序中，我相信它也会被其他因素所淹没。我完全同意它更具可读性，再说一遍，我只能假设有一个很好的理由让它如此复杂。它成功了！：）我只想问你一件事。为什么我写的代码在我的情况下不起作用？我不明白$$和| |的意义是什么，减法符号用的是什么？（-）@Adi：我不知道为什么你的不起作用，我试图把职位的变幻莫测留给那些维护图书馆的人
&
是JavaScript和运算符，
|
是JavaScript或运算符。它们比大多数编程语言中的直接逻辑运算符更有趣（也更强大），这里有更多：@Adi:你的代码不起作用，因为你的
if
条件总是正确的。@Adi，@Pumbaa80:Doh--是的，特别是
if（document.body）
条件，它在
if之后（document.documentElement）
条件将始终为真，使
documentElement
部分代码失效。 
x = e.clientX + SCROLL_ROOT.scrollLeft;
y = e.clientY + SCROLL_ROOT.scrollTop - 67;