onclick事件使用Raphaeljs

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并在其上写入文本，但没有成功。我可以在萤火虫中看到div，但不能在网页上看到！我已经给出了左上宽度和高度的样式属性，并声明了绝对的位置。但没有成功。

请帮助我。 任何帮助表示赞赏！ 卡维塔

我尝试使用frontlayer背层解决方案。我克隆了后台并为它添加了一个点击处理程序。我根本没有使用'this'。事件从未被解雇！ 请帮我这个！ Kavita

Answer 1

如何使用相同的处理程序的文本和rect，使用fill-opacity为0？

Answer 2

这里有两种方法可以做到这一点。在他们两个中，我只是为文本添加一个onclick。换句话说，对矩形和文本使用相同的onclick。

1）只是在最后

group[group.length - 1].node.onclick = function() { c2.attr("fill", "red");}; 

2）添加这一行或者，你可以创建另一个变量C3，C2一样，并附加的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); 
var c3 = paper.text(35, 35, "Hello").attr({"font-size":36}); 
group.push(c2); 
group.push(c3); 

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

我在这里让文字真的很大，所以你可以肯定你点击文本而不是矩形。

Answer 3

这是很好的实际提供一个3层的对象，因为你可以颜色的背层，你怎么样。前层与后层的形状相同，但其不透明度为零，以便您可以在中间层看到文字。 我也不喜欢使用节点来处理事件，但本地可用的Raphael事件处理机制。 下面的例子是从我的网站上一个例子取，我都剪下来，甚至进一步，所以它更容易理解。 另请注意，这是一个按钮，由前后两层的圆圈组成，并在两层之间夹着文字。它们可以很容易地是矩形/圆角矩形。 的功能包括颜色反转鼠标悬停/鼠标移开......

button = function (paper, xpos, ypos, r, labeltext) 
{ 

this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0 , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0}); 

/*The text automatically centres itself as this is the default text positioning for Raphael text*/ 
this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18}); 

/*Now we make a copy for the front layer and we also make the back layer opaque. So that you can see it's yellow fill*/ 
this.frontLayer = this.backLayer.clone(); 
this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1}); 

/*Now make the back layer and the text referencable for the mouseover, mouseout and click event of the front layer*/ 
this.frontLayer.backLayer= this.backLayer; 
this.frontLayer.label = this.label; 

/*Add a preferred cursor by referencing the underlying DOM object of the frontLayer*/ 
this.frontLayer.node.style.cursor = 'pointer'; 

/*Now you can interact with the lower layers behind the invisible covering layer (frontLayer) in it's event methods*/ 
this.frontLayer.mouseover(
function (e) { 
    this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000); 
    this.label.animate({ fill: "#FFFF00" }, 1000); 
    } 
); 
this.frontLayer.mouseout(
function (e) { 
    this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000); 
    this.label.animate({ fill: "#FF0000" }, 1000); 
    } 
); 
this.frontLayer.click(  
function (e) { 
     alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+ 
     "Button Text  : "+this.label.attr("text")+"\n"+ 
     "Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+ 
     "Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+ 
     "Button Radius : "+this.backLayer.attr("r")); 
    } 

); 
} 
/*Create the button*/ 
rappyButton = new button(paper, 250, 200, 75, "Raphael"); 

希望这有助于。

Answer 4

您已经使用拉斐尔的set财产（http://raphaeljs.com/reference.html#set）。你有没有尝试加入onclick？

group.click(function(event) { 
    c2.attr({fill: "red"}); 
}); 

Answer 5

为按钮中的所有元素创建一个集合。然后为该组添加一个单击（或鼠标）处理程序。请注意，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 6

onmousedown事件在IE 7,8-工作对我来说，和图9

  st[0].onclick = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 
      st[0].onmousedown = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 

我尝试了一些其他的方法还有，抽象的功能到一个变量，但它没有工作。在我的情况下，我不能在显示中添加一个矩形，并让人们点击这个，这是一个糟糕的解决方案，有几个原因。

希望这会有所帮助！

Answer 7

考虑只是忽略文本节点上的指针事件并让它们传递给父rect。

svg text { 
    pointer-events: none; 
}