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>

我有这样的错误

未捕获的TypeError：无法读取属性＆＃39; _pgListeners＆＃39;未定义的

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

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

Answer 1

以下行中的querySelector拼写错误：

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

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

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

1 个答案: