Javascript 拉斐尔画布（背景）onclick事件

我一直在与拉斐尔合作，在画布上创建拖放形状。我使用

.drag（）

函数（在Raphael框架中提供）以及事件函数来完成此操作。我这样做没有问题

我还有一个函数可以创建一个新的形状

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中的任何位置（不包括形状），事件将被触发。

我只需将常规的单击事件（使用vanilla javascript或您正在使用的任何js框架）附加到画布节点（或包含#canvas元素的父节点）上

使用jquery：

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

---

否则，如果您死心塌地地使用Raphael事件，您可以在整个画布上绘制一个矩形，并捕获该画布上的单击事件。但这似乎是一个很大的开销。

由于被接受的答案对我不起作用（尽管它确实让我走上了正确的轨道），我想我会发布我是如何解决这个问题的，以防有其他人处在我的位置上

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

---

与IE兼容的解决方案。谢谢

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

$("#canvas").click(canvasClick);

canvasClick: function(e) {
    if (e.target.nodeName == "svg" || e.target.nodeName == "DIV" )

},

---

问题是，如果单击形状，仍然会调用该事件。我只希望背景应用于此事件。在myDblClick中，检查event.originalTarget，如果它是节点“rect”等，则触发自定义事件$（#canvas'）.trigger（'dblclick.raphDblClick'，{origEvent:event}）；。沿着这些线的东西应该可以工作通常你移动

纸张

，因此

纸张.画布

也应该可以工作。