0

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

//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/

4

1 回答 1

0

您将不得不以一种或另一种方式处理来自不同对象的事件，我猜想使用几个处理程序，或者使用一个可能具有事件传播和处理的处理程序，或者使用一组进行分组。当前事件来自按钮显示时，因此事件逻辑并不完全有意义。因此，您也可以向按钮添加处理程序（例如，编辑或使用集合）。

一个例子是……

        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在这里http://jsfiddle.net/V4E4Q/1/

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

于 2013-11-15T15:06:30.413 回答