在javascript中滚动单击鼠标位置答案

【问题标题】：click mouse position with scroll in javascript在javascript中滚动单击鼠标位置
【发布时间】：2011-06-10 22:05:17
【问题描述】：

我有代码可以在浏览器滚动时获取 x-y 坐标：

left1 = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
top1 = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

这适用于 IE7，但不适用于 Mozilla Firefox 3.5.19。如何让它在 Firefox 中运行？

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

以下 JS 适用于 IE 8 和 firefox 3.6.17

function getScrollingPosition()
{
var position = [0, 0];
if (typeof window.pageYOffset != 'undefined')
{
position = [
window.pageXOffset,
window.pageYOffset
];
}
else if (typeof document.documentElement.scrollTop
!= 'undefined' && document.documentElement.scrollTop > 0)
{
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
else if (typeof document.body.scrollTop != 'undefined')
{
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
return position;
}

这篇文章也可能有所帮助。 http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

【讨论】：

【解决方案2】：

请记住，在 Mozilla 中处理单击事件的方式与在 Internet Explorer 中不同。他们也有不同的方式来获得光标位置的位置。这是一个非常简单的 google 搜索，可以获取两者的详细信息。

 var IE = document.all ? true : false; // check to see if you're using IE

if (IE) //do if internet explorer 
        {
            cursorX = event.clientX + document.body.scrollLeft;
            cursorY = event.clientY + document.body.scrollTop;
        }
        else  //do for all other browsers
        {
            cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        }

另外请注意，您的初始化代码中应该有如下内容：

if (window.Event) {
            if (window.captureEvents) { //doesn't run if IE
                document.captureEvents(Event.MOUSEMOVE);
            }
        }
        document.onmousemove = refreshCursorXY;

正如我所说的，在点击方面，浏览器之间的点击价值存在差异。例如，这个检查应该发生在你的点击事件中（你发送 e，事件，到）。 e 不会由 I.E. 发送。所以我们这样做：

//internet explorer doesn't pass object event, so check it...
        if (e == null) 
        {
            e = window.event;
        }

        //1 = internet explorer || 0 = firefox
        if ((e.button == 1 && window.event != null || e.button == 0))

同样，IE 和其他浏览器有很多不同之处，因此有很多文档。如果您需要有关该主题的更多信息，谷歌搜索可以创造奇迹。

【讨论】：

【解决方案3】：

只有 IE 将事件信息放在全局窗口对象中。所有其他浏览器都遵循 W3C 建议，将事件信息传递给在元素上注册的侦听器回调。您还需要使用 element.addEventListener() 而不是 element.attachEvent()。请参阅 Mozilla 开发者网络上的 addEventListener() 文档。

【讨论】：