如何在没有外部库的情况下处理悬停Polymer方式？ [英] How can I handle a hover the Polymer way without external libraries?

问题描述

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

I figured I would need to do something like:

< li on-mouseover ={{myHoverHandler}}> blah< / li> 因为处理点击次数如下所示：

<li on-mouseover="{{ myHoverHandler }}">blah</li> because handling clicks looks like this:

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

我尝试使用此处文档中显示的方式：声明事件映射，但 on-mouseenter 和 on-mouseover 未按预期工作。

I've tried using the way shown in the documentation here: declarative event mapping , but on-mouseenter and on-mouseover aren't working as expected.

我也无法传递参数我的处理程序，但这是一个不同的故事。

I'm also having trouble passing parameters to my handlers, but that's a different story.

推荐答案

on-mouseover 和 on-mouseout 是正确的，这是一个演示为 Stack Snippet ：

on-mouseover and on-mouseout are correct, here's a demo as a 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 属性。也许有一个错字？

It's possible that your element doesn't have a myHoverHandler property. Perhaps there's a typo?

至于是否使用Polymer事件绑定与其他方法，你绝对可以使用vanilla js或jquery或其他方法。 Polymer处理繁忙的工作，比如确保事件处理程序在条件和重复模板中注册，将 this 绑定到通常所需的元素，以及从DOM中删除元素时取消注册处理程序。有时虽然手动操作也很有意义。

As for whether to use Polymer event binding vs other methods, you can absolutely do this with vanilla js or jquery or whatever. Polymer handles a bit of the busy work, like making sure that the event handler is registered in conditional and repeated templates, binding this to the element which is usually what you want, and deregistering the handlers when their elements are removed from the DOM. There are times though when doing it manually makes sense too though.

这篇关于如何在没有外部库的情况下处理悬停Polymer方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！