如何在没有外部库的情况下处理悬停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或其他方法。 聚合物处理了一下繁忙的工作，像确保事件处理程序被注册条件和重复模板，结合this给这通常是你想要的元素，并在注销处理程序时，其元素从DOM中移除。 有时虽然手动操作也有意义。

Answer 2

实际上它应该是

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

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

Answer 3

如果您需要对主机 - 组件本身上的悬停做出反应，您应该使用侦听器 ：

<dom-module id="hoverable-component">
  <template>

    <div>Hoverable Component</div>

  </template>

  <script>
    Polymer({
      is: 'hoverable-component',

      listeners: {
        mouseover: '_onHostHover',
        mouseout: '_onHostUnhover',
      },

      _onHostHover: function(e){
        console.debug('hover');  
      },

      _onHostUnhover: function(e){
        console.debug('unhover');  
      },

    });
  </script>
</dom-module>