使用Raphaeljs进行rect的Onclick事件

Question

我试图绘制一个简单的矩形,上面有一些文字.由于形状上没有文字,我正在创建一个具有相同文本和矩形对象坐标的集合.我需要在onclick事件上改变一些东西.因此,我使用了obj.node.onclick =语句并编写了一个处理程序.我的问题是,如果文本对象用于onclick,则仅当我单击文本时才会调用事件处理程序.如果我使用rect进行onclick,我必须单击边框区域.我的要求是,点击可以与形状中的文本一起出现在整个形状区域.

   var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var c1 = paper.path("M35 60 L35 90");
var c2 = paper.rect(10, 10, 50, 50,10);
group.push(c2);
group.push(paper.text(35, 35, "Hello"));

c2.attr("fill", "blue");
c2.node.onclick = function () { c2.attr("fill", "red");}; 

我试图使用div覆盖rect并在其上写文本但没有成功.我可以在firebug中看到div而不是在网页上!我给它左上角宽度和高度的样式属性以及将位置表示为绝对值.但没有成功.

请帮我解决一下这个.任何帮助表示赞赏!卡维塔

我尝试使用前层背板解决方案.我克隆了后备层并添加了一个点击处理程序.我根本没有使用'this'.这件事永远不会被解雇!请在这件事上给予我帮助!卡维塔

Answer 1

为按钮中的所有元素创建一个集合.然后向该组添加一个单击(或鼠标)处理程序.请注意,rects必须有填充,否则它们不会获得鼠标事件.对于透明按钮,使用不透明度0.

var paper = Raphael(10, 10, 320, 200);
var group = paper.set();
var COLOR_NORMAL = 'blue';
var COLOR_HOVER = 'red';
var background = paper.rect(10, 10, 50, 50,10).attr({
    fill: COLOR_NORMAL
});
var label = paper.text(35, 35, "Hello");

group.push(background);
group.push(label);

group.attr({
    cursor: 'pointer',
}).mouseover(function(e) {
    background.attr('fill', COLOR_HOVER);
}).mouseout(function(e) {
    background.attr('fill', COLOR_NORMAL);
}).mouseup(function(e) {
    alert("clicked");
}); 

Answer 2

对文本和矩形使用相同的处理程序（使用 a fill-opacityof 0）怎么样？