聚合物自定义元素和聚合物手势
Polymer custom elements and Polymer-gestures
我想在具有聚合物手势的聚合物自定义元素上添加侦听器事件。
这是我的示例代码:
- 我的自定义元素.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');
.
相关文章:
- 如何动态创建聚合物元素
- 造型:主机的聚合物元素与Javascript
- 如何在html和javascript中捕捉聚合物元素的屏幕截图
- YUIDocs 解析聚合物元素
- 仅在需要时实例化聚合物元素
- 如何从不同的元素访问聚合物元素中的属性
- 如何在渲染聚合物元素后触发事件
- 更新聚合物元素模板
- 如何使用javascript函数创建可以调用javascript函数的聚合物元素
- 聚合物元素css未显示-检查器中没有错误
- 使用jquery访问聚合物元素变量
- 聚合物元素加载非常缓慢
- 如何观察聚合物元素属性值从索引.html的变化
- 动态添加聚合物元素的就绪事件
- 如何在没有事件的自定义聚合物元素之间进行讨论
- 删除聚合物元素,文件上传在实例上传时逐渐添加更多文件
- 如何确定聚合物元素是否加载
- 按动态属性值选择聚合物元素
- 聚合物元素注册和生命周期(创建和准备调用两次)
- 如何为聚合物元素添加功能属性