[英]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>
because handling clicks looks like this: <li on-mouseover="{{ myHoverHandler }}">blah</li>
因为处理点击次数如下所示:
<li on-click="{{ myClickHandler }}">blah</li>
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. 我已尝试使用此处文档中显示的方式: 声明性事件映射 ,但
on-mouseenter
和on-mouseover
未按预期工作。
I'm also having trouble passing parameters to my handlers, but that's a different story. 我也无法将参数传递给我的处理程序,但这是一个不同的故事。
on-mouseover
and on-mouseout
are correct, here's a demo as a Stack Snippet
: 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>
It's possible that your element doesn't have a myHoverHandler
property. 您的元素可能没有
myHoverHandler
属性。 Perhaps there's a typo? 也许有一个错字?
As for whether to use Polymer event binding vs other methods, you can absolutely do this with vanilla js or jquery or whatever. 至于是否使用Polymer事件绑定与其他方法,你绝对可以使用vanilla js或jquery或其他方法。 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. 聚合物处理了一下繁忙的工作,像确保事件处理程序被注册条件和重复模板,结合
this
给这通常是你想要的元素,并在注销处理程序时,其元素从DOM中移除。 There are times though when doing it manually makes sense too though. 有时虽然手动操作也有意义。
Actually it should be 实际上它应该是
<button on-mouseover='onHovered'
on-mouseout='onUnhovered'>
without the curly braces. 没有花括号。 Also, you don't need to pass in the properties if you need to use them in the event handler function.
此外,如果需要在事件处理函数中使用它们,则无需传入属性。
In case you need to react to hover on the host -Component itself, you should use listeners : 如果您需要对主机 - 组件本身上的悬停做出反应,您应该使用侦听器 :
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.