拉斐爾畫布（背景）onclick事件

我一直在與拉斐爾合作在畫布上創建拖放形狀。我使用.drag（）函數（在Raphael框架中提供）以及我的事件函數執行此操作。我沒有這個問題。拉斐爾畫布（背景）onclick事件

我也有一個函數，創建一個新的形狀onDblClick，問題是，我只能將事件附加到形狀或我創建的其他元素。

添加事件，形狀就像這樣：

R = Raphael("canvas", "100%", "100%"), 
    R.rect(100, 100, 25, 50).attr({fill: fillColor}).dblclick(myDblClick);

畫布上使用相同的方法不起作用：

R = Raphael("canvas", "100%", "100%"), 
    R.dblclick(myDblClick);

是否有人知道的方式來連接單擊事件到畫布，即我可以點擊div中的任何位置（不包括形狀），並且事件將被觸發。

謝謝。

來源

2010-11-11 Adam Holmes

我只需在canvas節點（或包含#canvas元素的父節點）上附加常規的單擊事件（使用vanilla javascript或任何js框架）。

使用jQuery：

//Bound to canvas 
$('#canvas').bind('dblclick', myDblClick); 
//Bound to parent 
$('#canvas').parent().bind('dblclick', myDblClick);

否則，如果你是死心塌地使用拉斐爾的事件，你可以畫一個矩形，在整個畫布，在捕獲點擊事件。但是這似乎是一個很大的開銷。

來源

2010-11-11 21:25:57

這個問題是，如果點擊一個形狀，該事件仍然被調用。我只希望背景適用於此事件。 – 2010-11-11 22:15:44

在myDblClick裏面，檢查event.originalTarget，如果它是節點「rect」等，然後觸發一個自定義事件。 $（'＃canvas'）。trigger（'dblclick.raphDblClick'，{origEvent：event}）;.沿着這些線應該工作 – 2010-11-12 19:45:22

通常你會移動'紙'，所以'paper.canvas'也應該工作。 – tokland 2012-11-06 23:26:18

作爲公認的答案並沒有爲我工作（雖然它確實讓我在正確的軌道上），我想我會後我如何的情況下，解決它有其他人在我的位置......

//Create paper element from canvas DIV 
var canvas = $("#Canvas"); 
paper = Raphael("Canvas", canvas.width(), canvas.height()); 

//Register Event 
$("#Canvas").click(CanvasClick); 

//Event Handler 
function CanvasClick(e) { 
    if (e.target.nodeName == "svg") 
    { 
     //This will only occur if the actual canvas area is clicked, not any other drawn elements 
    } 
}

來源

2011-10-17 14:37:16 musefan

與IE兼容性的musefans解決方案。謝謝

來源

2011-12-18 13:52:59 Pascalius

拉斐爾畫布（背景）onclick事件

回答

相關問題