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

Question

我想我需要做的事情如下:

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

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

我尝试使用此处文档中显示的方式:声明性事件映射,但是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事件绑定与其他方法,你绝对可以使用vanilla js或jquery或其他方法.Polymer处理繁忙的工作,例如确保事件处理程序在条件和重复模板中注册,绑定this到通常所需的元素,并在从DOM中删除元素时取消注册处理程序.有时虽然手动操作也有意义.

Answer 2

实际上它应该是

<button on-mouseover='onHovered' 
        on-mouseout='onUnhovered'>

没有花括号.此外,如果需要在事件处理函数中使用它们,则无需传入属性.