Javascript：如何跟踪 div 的绝对位置 (top/left)？

Question

我需要根据 html 元素 (div) 在屏幕上的位置获取其所有位置。我想要像 addEventListener 这样的东西，它会在屏幕发生变化时发送元素的位置（在 resize/on zoom/on 滚动等 - 每当元素的位置发生变化时）。纯 Javascript 有可能吗？

Answer 1

这不是一个完整的答案，而是我在评论中的意思的两个例子。也许它会对设置您要尝试做的事情有所帮助。没有预建的方法来做你想做的事，但这并不意味着你不能做。

第一个用于在用户更改浏览器的默认字体大小时调整屏幕布局。没有相关事件，所以我在 window 上使用 focus 和 blur 事件并跟踪屏幕外元素的大小以测试默认字体大小是否正确变了。它在 blur 上捕获并在 focus 上测试。调整大小发生在 sizeTable 函数中。

window.addEventListener( 'focus', () => fontSizeProxy( false ), false );
window.addEventListener( 'blur', () => fontSizeProxy( true ), false );
fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
fontSizeProxy.size = document.querySelector('div.tabs').clientWidth;

function fontSizeProxy( b )
 {
   if ( b )
     { fontSizeProxy.size = document.querySelector('div.tabs').clientWidth; }
   else // focus event
     { setTimeout( done, 1000 ); };

    function done()
     {
       // Get w after the delay so browser can reset completely.
       let w = document.querySelector('div.tabs').clientWidth;
       if ( w !== fontSizeProxy.size )
         {
            fontSizeProxy.size = w;
            fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
            sizeTable( nav.n );
         }; // end if
       w = null;    
    } // close done
 } // close fontSizeProxy

第二个示例是 resize 事件，显示它是因为它限制了事件，因此函数 sizeTable 不会像事件触发时那样频繁执行。您可能需要比此处使用的 500 毫秒更少的油门。

window.addEventListener( 'resize', resize, false );

function resize()
 { 
    if ( !resize.clear ) 
      {
        resize.clear = setTimeout( () => { resize.clear = null; sizeTable( nav.n ); }, 500 );    
      }; // end if
 } // close resize

我想，您想要的概念就在这里。您只需要制作您的 sizeTable 函数版本，该函数可以在事件发生时查询和调整您想要执行的内容，并且您可能必须侦听大量事件才能执行相同的函数，如此处所示。

Javascript：如何跟踪 div 的绝对位置 (top/left)？

Javascript: How to keep track of absolute positions (top/left) of a div?

html

javascript

events

event-handling

ecmascript-6