Question

我有2套代码
以下适用于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">

Answer 1

位置的东西是一种皇室的痛苦。看起来您必须使用两者。 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;

偏离主题：对于定位内容，我确实使用了jQuery，YUI，Closure，Prototype这样的库或any of several others。然后，您可以从代码中获得很多好处，许多人使用代码并报告边缘情况等等。

Answer 2

这是由于old WebKit issue（由于某些原因而被关闭为WontFix）。

你可以做类似 T.J的事情。克劳德说，但这有点夸张。你最好的选择是 功能测试滚动值（但仅在文档准备就绪后！）。

var SCROLL_ROOT = (function() {
  var html = document.documentElement,
      scrollTop = html.scrollTop,
      root;
  html.scrollTop++;
  root = (html.scrollTop != scrollTop + 1) ? document.body : html;
  html.scrollTop--;
  return root;
})();

您的代码变为

x = e.clientX + SCROLL_ROOT.scrollLeft;
y = e.clientY + SCROLL_ROOT.scrollTop - 67;

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

2 个答案: