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

Polymer custom elements and Polymer-gestures

本文关键字:聚合物 元素 自定义      更新时间:2023-09-26

我想在具有聚合物手势的聚合物自定义元素上添加侦听器事件。

这是我的示例代码:

- 我的自定义元素.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>

- 我的自定义父元素.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 变量上添加事件侦听器???

以下行中的 querySelector 拼写错误:

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

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