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事件绑定与其他方法，你绝对可以使用vanilla js或jquery或其他方法。 Polymer处理繁忙的工作，例如确保事件处理程序在条件和重复模板中注册，将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>

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

3 个答案: