简体繁体 English

在使用Raphael.js时使用.hover和.click失去逻辑

[英]Getting lost in logic with .hover and .click while using Raphael.js

原文 2011-10-15 16:35:23 8 1 javascript/ jquery/ svg/ raphael

I'm trying to have a hover and a click state for a part of a map. 我正在尝试为地图的一部分提供悬停和点击状态。 Right now I'd just like a color to appear on hover and a different color to appear on click. 现在，我只想在悬停时出现一种颜色，而在单击时出现一种不同的颜色。 Ideally, when the user moves their mouse away from the clicked element, the click color will stay on. 理想情况下，当用户将鼠标从单击元素移开时，单击颜色将保持不变。 It seems like the .hover method is overriding this though. 看起来.hover方法似乎覆盖了这一点。

I tried to follow something like Using hover and click with jQuery UI tabs? 我试图遵循类似使用悬停，然后单击带有jQuery UI选项卡的方法？ but the .stop method didn't seem to help my case either. 但.stop方法似乎也无济于事。

This is my first time using Raphael so I'm getting a little confused as to where I should be doing jQuery and where I should be using parts of Raphael. 这是我第一次使用Raphael，所以我在应该使用jQuery的地方以及应该使用Raphael的部件的地方有些困惑。

Thanks for taking a look. 谢谢参观。

fiddle: http://jsfiddle.net/KXw9A/5/ 小提琴： http : //jsfiddle.net/KXw9A/5/

1 个解决方案

Here's a quick fix: http://jsfiddle.net/KXw9A/7/ 快速修复方法： http : //jsfiddle.net/KXw9A/7/

I just added a line to your hover functions to only fire if the fill does not match your wardAttrClick.fill value (meaning the element has been clicked). 我刚刚向您的悬停函数添加了一行，仅当填充与您的wardAttrClick.fill值不匹配时才触发（意味着该元素已被单击）。