如何防止拉斐尔的徘徊？

当我使用Raphael liblary绘制一些项目时，我正在开发一些页面。

我的应用程序

所以我的问题在于，当我移动到某个rect它会长大但是当我的鼠标位于我的rect上的文本上时，它会丢失它的hover。 您可以在我的应用示例中看到它。

 var paper = new Raphael(document.getElementById('holder'), 500, object.length * 100); drawLine(paper, aType.length, bType.length, cType.length, cellSize, padding); process = function(i,label) { txt = paper.text(390,((i+1)* cellSize) - 10,label.devRepo) .attr({ stroke: "none", opacity: 0, "font-size": 20}); var a = paper.rect(200, ((i+1)* cellSize) - 25, rectWidth, rectHeight) .hover(function() { this.animate({ transform : "s2"}, 1000, "elastic"); this.prev.animate({opacity: 1}, 500, "elastic"); this.next.attr({"font-size" : 30}); }, function() { this.animate({ transform : "s1" }, 1000, "elastic"); this.prev.animate({opacity: 0}, 500); this.next.attr({"font-size" : 15}); }); } 

我试过了e.preventDefault(); 在this.next和其他一些解决方案的hover，但它不起作用。

任何帮助，将不胜感激。

Answer 1

大多数人会建议你在盒子和标签上放置一个透明的矩形，然后将hoverfunction附加到它上面。 （如果内存服务，你必须使不透明度为0.01而不是0，以防止对象丢失其附加事件。）这很好，但我不喜欢这个解决方案; 它感觉很乱，并且用不必要的物体弄乱了页面。

相反，我建议这样做：从hover中删除第二个function，使其仅在function上成为鼠标hoverfunction。 在绘制任何矩形和标签之前，请制作与纸张大小相同的矩形“垫子”。 然后，附加最小化标签的function作为鼠标hover在垫子上。 换句话说，你正在改变触发器，从开箱即用到鼠标hover在它外面的区域。

我在垫子上留下了一点不透明度和颜色，以确保它正常工作。 您只需将颜色更改为背景颜色即可。

  var mat = paper.rect(0, 0, paper.width, paper.height).attr({fill: "#F00", opacity: 0.1}); 

现在，您想为所有矩形创建一个容器，以便您可以遍历它们以查看哪个需要最小化。 我创建了一个名为“矩形”的对象，其中包含我们关注的对象。 然后：

  mat.mouseover(function () { for (var c = 0; c < rectangles.length; c += 1) { //some measure to tell if rectangle is presently expanded if (rectangles[c].next.attr("font-size")) { rectangles[c].animate({ transform : "s1" }, 1000, "elastic"); rectangles[c].prev.animate({opacity: 0}, 500); rectangles[c].next.attr({"font-size" : 15}); } } }); 

然后我刚从各个矩形中删除了mouseout函数。

jsBin

要清楚，这将有一些缺点：如果人们快速地运行鼠标，他们可以同时扩展几个矩形。 一旦鼠标接触到垫子，这就会得到纠正。 我认为function看起来很不错。 但隐形垫子总是一种选择。

Answer 2

我给拉斐尔写了一个小扩展名 – 叫做hoverInBounds它解决了这个限制。

演示： http ： //jsfiddle.net/amustill/Bh276/1

 Raphael.el.hoverInBounds = function(inFunc, outFunc) { var inBounds = false; // Mouseover function. Only execute if `inBounds` is false. this.mouseover(function() { if (!inBounds) { inBounds = true; inFunc.call(this); } }); // Mouseout function this.mouseout(function(e) { var x = e.offsetX || e.clientX, y = e.offsetY || e.clientY; // Return `false` if we're still inside the element's bounds if (this.isPointInside(x, y)) return false; inBounds = false; outFunc.call(this); }); return this; }