网页上的鼠标移动问题(JavaScript)

时间:2011-02-13 09:20:17

标签: javascript html scroll

我有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">

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

这是由于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;