如何在沒有外部庫的情況下處理懸停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>