javascript - Polymer - 获取位于 Shadow dom 中的 div 位置

Question

我目前正在使用 Polymer 构建自定义元素。现在我想要一个位于我的自定义元素中的 div 来执行某个 onclick 函数，并且在该函数中我需要获取它相对于视口(viewport)的位置。

所以通常我会使用

var offsets = element.getBoundingClientRect();

现在在自定义元素中 - 假设我正在谈论的 div 具有 ID insideCard，因此它是

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.$，你应该先绑定(bind)上下文:

 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);
        }
    });