盘旋在Raphaeljs的一组元素

Question

我有一个只包含一个矩形的集合.

var hoverTrigger = this.paper.set();
var outline = this.paper.rect();
outline.attr({
...
hoverTrigger.push(outline)
this.sprite.push(hoverTrigger);

悬停时,矩形应该展开,并添加一些链接,鼠标关闭后,链接消失,矩形再次变小.

hoverTrigger.hover(function () {
  var link = this.paper.text();
  hoverTrigger.push(link);
  outline.animate({
  ...
}, function() {
  link.remove();
  outline.animate({
  ...
});

但是,似乎悬停功能单独应用于集合中的每个项目,而不是整个集合,因为当您将鼠标悬停在链接上时,悬停功能将触发,链接将消失.有时盒子会悬停在快速连续和spazzes中的事件上.

有没有办法将悬停应用于一组事物,以便在集合中的两件事之间进行鼠标悬停不会触发悬停？

Answer 1

我最近自己面对这个限制,我决定给Raphael写一个小扩展,称之为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;
}

在创建Raphael纸张对象之前放置上面的代码块.