Question

我正在处理一个按钮，当您将鼠标悬停在按钮上时，会展开一个图像和一些文本，这些文本需要以不同的方式对点击事件作出反应。事实证明，在一组事物上创建单个悬停事件需要棘手的解决方法，因为当您在集合中的项目之间进行切换时，Raphael将检测到鼠标输入/输出。（原始问题：Hovering over a set of elements in Raphaeljs）

上述问题中接受的答案使用isPointInside函数来确定鼠标输入/输出是否实际上是移入/移出整个集合。它的演示效果很好:(蓝色圆圈带有修复，红色没有）

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

但是，此示例中显示的红色方块代表我的图像，如果您在红色方块和蓝色方块之间快速移动鼠标，则永远不会捕获悬停事件。此外，鼠标悬停在红色方块的边缘经常会引起故障。

http://jsfiddle.net/wTUex/

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

Answer 1

更新的答案（原文如下）

在评论中的每个对话中，您还可以将ID分配给框，然后在mouseout上测试鼠标下的新对象是否为红色矩形，如下所示：

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，而是触发它。

请参阅：How to prevent loss hover in Raphael?

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

Raphaeljs使用isPointInside并捕获悬停事件

1 个答案: