Question

我有一个盒子。当你将鼠标放在盒子上时，盒子顶部会出现一个按钮。悬停功能的工作方式是它无法识别鼠标仍在盒子顶部。我怎么解决呢？

//I create the paper
var paper = Raphael(0, 0, 500,500);

//I add the box
var box = paper.add([{
    type: "rect",
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: '#000',
}])

// I declare a varible for the button
var button

//I add hover functions to the box. 
//first function: when the mouse is on, create a red circle and add an 
//onclick event to the circle
box.hover(function () {
    button = paper.circle(150, 150, 25).attr({ 'fill': 'red' })
    button.click(function () { alert("You clicked me!")})
},
//second function: when the mouse leaves the box, remove the circle
function () {
    button.remove()
})

这是一个例子

http://jsfiddle.net/V4E4Q/

Answer 1

您将不得不以这样或那样的方式处理来自不同对象的事件，或者我想与几个处理程序一起处理，或者使用可能具有事件传播和处理的事件，或者具有集合的组。当前事件来自显示的按钮，因此事件逻辑不是很有意义。因此，您也可以为按钮添加处理程序（例如，编辑或使用集合）。

一个例子是......

        var button = paper.circle(150, 150, 25).attr({ 'fill': 'red' });
        button.hide();
        button.click( function() { alert("button clicked"); } );

        box.mouseout( function() { button.hide() });
        button.mouseover( function() { button.show(); });
        box.mouseover(function () { button.show(); } );

我不确定这是否是最有效的方式，但它应该有效。 jsfiddle here http://jsfiddle.net/V4E4Q/1/

编辑：另一种可能更简洁的方法是将元素分组并处理点击。以下是修改后的示例http://jsfiddle.net/V4E4Q/3/

按钮出现在悬停状态

1 个答案: