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; 
}