0

我正在开发一个按钮，当你将鼠标悬停在它上面时，它会展开以显示图像和一些文本，它们需要对点击事件做出不同的反应。事实证明，在一组事物上创建单个悬停事件需要一些棘手的解决方法，因为当您在集合内的项目之间进行切换时，Raphael 会检测到鼠标进出。（原始问题：将鼠标悬停在 Raphaeljs 中的一组元素上）

上述问题中接受的答案使用该isPointInside函数来决定鼠标进/出是否实际上是移入/移出整个集合。他们的演示效果很好：（蓝色圆圈是他们的修复，红色没有）

http://jsfiddle.net/amustill/Bh276/1

但是，此示例中出现的红色方块代表我的图像，如果您在红色方块和蓝色方块之间快速移动鼠标，则永远不会捕获悬停事件。此外，将鼠标悬停在红色方块的边界上通常会导致故障。

http://jsfiddle.net/wTUex/

为什么 isPointInside 似乎返回不正确？我可以使用更准确的功能吗？

4

1 回答 1

0

更新的答案（以下原文）

根据评论中的对话，您还可以为框分配 id，然后在鼠标移出时测试鼠标下的新对象是否是红色矩形，如下所示：

var Paper = new Raphael(0, 0, 400, 300);
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"});
mat.node.id = "mat";
// Hover in function
function hoverIn() {
  newBox.show();
  this.text.toFront();
  this.animate({
    height: 140,
    width: 140,
    x: 130,
    y: 80
  }, 100);
}

// Hover out function
function hoverOut(e) {
  console.log(e, e.toElement);
  if (e.toElement.id !== "redbox") {
      newBox.hide();
      this.animate({
          height: 100,
          width: 100,
          x: 150,
          y: 100
      }, 100);
  }
}

var rect = Paper.rect(150, 100, 100, 100).attr({fill: 'blue' });
rect.node.id = "bluebox";
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide();
newBox.node.id = "redbox";
rect.attr({r:5});    
rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12);
rect.hover(hoverIn, hoverOut);

jsFiddle

原始答案 我总是推荐一个不同的解决方案：而不是在一组复杂的情况下触发 hoverOut，只需在鼠标进入框外区域时触发它。

见：如何防止损失悬停在拉斐尔？

var Paper = new Raphael(0, 0, 400, 300);
//this should be colored white -- leaving as gray for clarity
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"});
// Hover in function
function hoverIn() {
    console.log(newBox);
    newBox.show();
  rect.text.toFront();
  rect.animate({
    height: 140,
    width: 140,
    x: 130,
    y: 80
  }, 100);
}    

// Hover out function
//notice "this" was replaced with "rect" since "this" now refers to mat
function hoverOut() {
  newBox.hide();
  rect.animate({
    height: 100,
    width: 100,
    x: 150,
    y: 100
  }, 100);
}

var rect = Paper.rect(150, 100, 100, 100).attr('fill', 'blue');
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide();


rect.attr({r:5});

rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12);
rect.mouseover(hoverIn);
mat.mouseover(hoverOut);

jsFiddle

于 2013-01-18T19:31:09.820 回答