Javascript 聚合-获得位于阴影dom中的divs位置

我目前正在用聚合物构建一个自定义元素。现在，我想在自定义元素中获取一个div来执行onclick的某个函数，在该函数中，我需要获取它相对于视图端口的位置

所以通常我会用

var offsets = element.getBoundingClientRect();

现在在custom元素中——假设我所说的div具有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

---

有人知道我如何访问divs位置，或者我在这里做错了什么吗？

要获取有关组件的信息，可以提供组件本身的公共方法。根据您的用例，这将返回组件内部div的clientRect：

<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>

这里有内容吗
聚合物（“x-card”{
getBoundingClientRect:函数（）{
返回此值。$.innerCard.getBoundingClientRect（）；
}
});
window.addEventListener（'polymer-ready'，function（）{
var card=document.querySelector（'x-card'）；
var rect=card.getBoundingClientRect（）；
console.log（rect）；//{高：18，宽：336，左：8，下：26，右：344…}
});

---

要获取有关组件的信息，可以提供组件本身的公共方法。根据您的用例，这将返回组件内部div的clientRect：

<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>

这里有内容吗
聚合物（“x-card”{
getBoundingClientRect:函数（）{
返回此值。$.innerCard.getBoundingClientRect（）；
}
});
window.addEventListener（'polymer-ready'，function（）{
var card=document.querySelector（'x-card'）；
var rect=card.getBoundingClientRect（）；
console.log（rect）；//{高：18，宽：336，左：8，下：26，右：344…}
});

---

要获取有关组件的信息，可以提供组件本身的公共方法。根据您的用例，这将返回组件内部div的clientRect：

<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>

这里有内容吗
聚合物（“x-card”{
getBoundingClientRect:函数（）{
返回此值。$.innerCard.getBoundingClientRect（）；
}
});
window.addEventListener（'polymer-ready'，function（）{
var card=document.querySelector（'x-card'）；
var rect=card.getBoundingClientRect（）；
console.log（rect）；//{高：18，宽：336，左：8，下：26，右：344…}
});

---

要获取有关组件的信息，可以提供组件本身的公共方法。根据您的用例，这将返回组件内部div的clientRect：

<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>

这里有内容吗
聚合物（“x-card”{
getBoundingClientRect:函数（）{
返回此值。$.innerCard.getBoundingClientRect（）；
}
});
window.addEventListener（'polymer-ready'，function（）{
var card=document.querySelector（'x-card'）；
var rect=card.getBoundingClientRect（）；
console.log（rect）；//{高：18，宽：336，左：8，下：26，右：344…}
});

---

未定义的错误是因为在onclick处理程序中，

此

与外部的

此

不同，因此如果要使用

此。$

，应首先绑定上下文：

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

---

未定义的错误是因为在onclick处理程序中，

此

与外部的

此

不同，因此如果要使用

此。$

，应首先绑定上下文：

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

---

未定义的错误是因为在onclick处理程序中，

此

与外部的

此

不同，因此如果要使用

此。$

，应首先绑定上下文：

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

---

未定义的错误是因为在onclick处理程序中，

此

与外部的

此

不同，因此如果要使用

此。$

，应首先绑定上下文：

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

---

您可以使用Polymer的声明性事件绑定使您的生活更轻松。例如：

<polymer-element name="x-foo">
  <template>
    <p on-tap="{{measureMe}}">Some Content</p>
  </template>
  <script>
    Polymer({
      measureMe: function(e) {
        var rect = e.currentTarget.getBoundingClientRect();
        alert(JSON.stringify(rect));
      }
    });
  </script>
</polymer-element>

某些内容
聚合物({
测量e：功能（e）{
var rect=e.currentTarget.getBoundingClientRect（）；
警报（JSON.stringify（rect））；
}
});

通过这种方式，代码和视图彼此了解较少，这将使项目更易于维护。没有关于

的顾虑，也不需要查询特定节点

如果愿意，您可以使用单击时的
而不是点击时的
。
tap
手势事件由Polymer生成，并与触摸事件或鼠标事件一起工作

您可以使用Polymer的声明性事件绑定来简化您的生活。例如：

<polymer-element name="x-foo">
  <template>
    <p on-tap="{{measureMe}}">Some Content</p>
  </template>
  <script>
    Polymer({
      measureMe: function(e) {
        var rect = e.currentTarget.getBoundingClientRect();
        alert(JSON.stringify(rect));
      }
    });
  </script>
</polymer-element>


某些内容
聚合物({
测量e：功能（e）{
var rect=e.currentTarget.getBoundingClientRect（）；
警报（JSON.stringify（rect））；
}
});

通过这种方式，代码和视图彼此了解较少，这将使项目更易于维护。没有关于
的顾虑，也不需要查询特定节点

如果愿意，您可以使用单击时的
而不是点击时的
。
tap
手势事件由Polymer生成，并与触摸事件或鼠标事件一起工作

您可以使用Polymer的声明性事件绑定来简化您的生活。例如：

<polymer-element name="x-foo">
  <template>
    <p on-tap="{{measureMe}}">Some Content</p>
  </template>
  <script>
    Polymer({
      measureMe: function(e) {
        var rect = e.currentTarget.getBoundingClientRect();
        alert(JSON.stringify(rect));
      }
    });
  </script>
</polymer-element>


某些内容
聚合物({
测量e：功能（e）{
var rect=e.currentTarget.getBoundingClientRect（）；
警报（JSON.stringify（rect））；
}
});

通过这种方式，代码和视图彼此了解较少，这将使项目更易于维护。没有人担心