我有四个按钮并尝试以声明方式附加处理程序的各种方式:
<paper-button id="btnEnter" class="enabled" raised roll="button" on-tap="lm.LoaderActionEnter">Enter</paper-button>
<paper-button id="btnRW" class="disabled" raised roll="button">
<core-icon icon="av:fast-rewind" on-tap="lm.LoaderActionRW()"></core-icon>
</paper-button>
<paper-button id="btnPause" class="enabled" raised roll="button">
<core-icon icon="av:pause-circle-outline" onclick="lm.LoaderActionPause()"></core-icon>
</paper-button>
<paper-button id="btnFF" class="disabled" raised roll="button">
<core-icon icon="av:fast-forward" on-tap="{{lm.LoaderActionFF}}"></core-icon>
</paper-button>
唯一有效的是标准的 onclick="handler()"
。我认为 on-tap="handler"
是可行的方法吗?上面的代码在一个普通的 index.html 页面中,在页面的常规流程中。 Javascript 和 polymer 代码在主页面呈现后延迟加载(启动页面)。
最好的方法是什么?我只找到了使用 "{{handler}}"
的演示,但是您将如何设置数据绑定(bind)?
最佳答案
on-tap="{{handler}}"
语法是 Polymer 特定的;它仅会在 Polymer 元素的模板或 auto-binding template 中工作.
onclick
属性之所以有效,是因为它内置于 DOM 中,但我们通常建议不要使用 click
事件,因为它在某些移动浏览器上引入了滞后时间。
因此,如果您没有为索引页使用自动绑定(bind)模板,我建议您改为强制执行:
Polymer.addEventListener(document.getElementById('btnEnter'), 'tap', lm.LoaderActionEnter);
你可能会问,为什么 Polymer.addEventListener
而不仅仅是 addEventListener
?这是与 Polymer 手势库相关的便捷方法,它生成 tap
手势。
调用 Polymer.addEventListener
确保一切设置正确以生成所需的事件。 (例如,对于某些浏览器,您可能需要指定 touch-action
CSS 属性来接收原始触摸事件。)
使用 on- 处理程序以声明方式注册的事件处理程序会自动通过此路径,因此大多数情况下,当您使用 Polymer 时,您不需要调用 Polymer.addEventListener
直接。
关于javascript - Polymer.js 将处理程序附加到标准 HTML Dom 中的纸张按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26683274/