聚合物 - 獲得位於陰影dom的divs位置

Question

我目前正在使用Polymer構建自定義元素。現在我想獲得一個位於我的自定義元素中的div來執行某個函數onclick，並且在該函數中我需要獲取它相對於視圖端口的位置。

所以通常我會用

var offsets = element.getBoundingClientRect(); 

現在，在自定義元素 - 假設我說的有ID innerCard股利所以這將是

this.$.innerCard.onclick = function(){ 
alert("Test 1"); 
var offsets = this.$.innerCard.shadowRoot.getBoundingClientRect(); 
alert("Test 2"); 
.... 
} 

第一警報觸發正確，但第二個沒有。 JavaScript控制檯給了我一個錯誤類型：

Uncaught TypeError: Cannot read property 'innerCard' of undefined tile-story.html:37$.innerCard.onclick tile-story.html:37 

有誰知道我怎麼能以其他方式或我在做什麼錯在這裏訪問的div的位置？

Answer 1

未定義的錯誤是因爲在onclick處理程序，this不一樣外this，因此，如果您要使用this.$，你應該首先結合上下文：

Polymer('tile-story', { 
     ready: function() { 
      this.$.innerCard.onclick = function() { 
       var offsets = this.$.innerCard.getBoundingClientRect(); //ClientRect {height: 18, width: 1350, left: 8, bottom: 44, right: 1358…} 
      }.bind(this); 
     } 
    }); 

Answer 2

要獲取有關組件的信息，您可以在組件本身上提供公共方法。根據你的使用情況下，這將返回clientRect組件內一個div：

<x-card></x-card> 

<polymer-element name="x-card"> 
    <template> 
     <div id="innerCard" class="card">Content_here</div> 
    </template> 
    <script> 
     Polymer('x-card', { 
      getBoundingClientRect: function() { 
       return this.$.innerCard.getBoundingClientRect(); 
      } 
     }); 
    </script> 
</polymer-element> 

<script> 
    window.addEventListener('polymer-ready', function() { 
     var card = document.querySelector('x-card'); 
     var rect = card.getBoundingClientRect(); 
     console.log(rect); // {height: 18, width: 336, left: 8, bottom: 26, right: 344…} 
    }); 
</script> 

Working example here