javascript - 如何在没有外部库的情况下以 Polymer 方式处理悬停？

Question

我想我需要做类似的事情:

<li on-mouseover="{{ myHoverHandler }}">blah</li>因为处理点击看起来像这样:

<li on-click="{{ myClickHandler }}">blah</li>

我已经尝试使用此处文档中显示的方式:declarative event mapping ，但是on-mouseenter和 on-mouseover没有按预期工作。

我也无法将参数传递给我的处理程序，但那是另一回事。

Answer 1

on-mouseover 和 on-mouseout 是正确的，下面是作为 Stack Snippet 的演示:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>

<my-app></my-app>
  
<polymer-element name='my-app'>
  <template>
    <button on-mouseover='{{onHovered}}' 
            on-mouseout='{{onUnhovered}}'>
      A humble button
    </button>
    <div>
      hovered: {{hovered}}
    </div>
  </template>
  <script>
    Polymer('my-app', {
      hovered: false,
      onHovered: function() {
        this.hovered = true;
      },
      onUnhovered: function() {
        this.hovered = false;
      }
    })
  </script>
</polymer-element>

您的元素可能没有 myHoverHandler 属性。可能有错字？

至于是否使用 Polymer 事件绑定(bind)与其他方法，您绝对可以使用 vanilla js 或 jquery 或其他任何方法来实现。 Polymer 会处理一些繁琐的工作，比如确保事件处理程序在有条件和重复的模板中注册，将 this 绑定(bind)到通常是您想要的元素，并在处理程序的元素出现时注销处理程序从 DOM 中删除。不过，有时手动执行此操作也很有意义。