聚合物自定义元素和聚合物手势

Question

我想使用 Polymer-gestures 在 Polymer 自定义元素上添加侦听器事件。

这是我的示例代码：

- my-custom-element.html

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="my-custom-element" attributes="width height color">
    <template>
        <canvas id="canvas"  width="{{width}}" height="{{height}}" style="background-color: {{color}}"  touch-action="none"></canvas>
    </template>
    <script>
        Polymer({
            width: '',
            height: '',
            color: ''
        });
    </script>
</polymer-element>

- my-custom-parent-element.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-gestures/polymer-gestures.html">

<polymer-element name="my-custom-parent-element">
    <template>
        <my-custom-element width="300px" height="200px" color="yellow"></my-custom-element>
    </template>
    <script>
        Polymer({
        ready: function() {

            this.myCustomElement = this.shadowRoot.querySelector('my-custom-element');

            var events = [
                // base events
                'down',
                'up',
                'trackstart',
                'track',
                'trackend',
                'tap',
                'hold',
                'holdpulse',
                'release'
            ];

            events.forEach(function(en) {
                PolymerGestures.addEventListener(this.myCustomElement, en, function (inEvent) {
                ...
            });
        }
        });
    </script>
</polymer-element>

我有这样的错误

未捕获的类型错误：无法读取未定义的属性“_pgListeners”

在调试模式下，当我在 my-custom-parent-element.html 中添加事件监听器时，我检查了 myCustomElement 变量的值，它为空。

如何在 myCustomElement 变量上添加事件监听器？？？

Answer 1

下一行中的 querySelector 拼写错误：

this.myCustomElement = this.shadowRoot.querrySelector('my-custom-element');

试试this.shadowRoot.querySelector('my-custom-element');。