javascript - Polymer.js 将处理程序附加到标准 HTML Dom 中的纸张按钮

Question

我有四个按钮并尝试以声明方式附加处理程序的各种方式:

<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)？

Answer 1

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直接。