拉斐尔帆布（背景）onclick事件

我一直在与Raphael合作，在canvas上创建拖放形状。 我使用.drag（）函数（在Raphael框架中提供）和我的事件函数来完成此操作。 这样做我没有问题。

我还有一个在dblClick上创建新形状的函数，问题是，我只能将事件附加到形状或我创建的其他元素。

向形状添加事件的方式如下：

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

在canvas上使用相同的原理不起作用 ：

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

有没有人知道将点击事件附加到canvas的方法，即我可以点击div中的任何位置（不包括形状），然后触发事件。

谢谢。

Answer 1

我只是将常规单击事件（使用vanilla javascript，或者您使用的任何js框架）附加到canvas节点（或包含#canvas元素的父节点）。

使用jquery：

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

否则，如果您在使用Raphael事件时已经死定，则可以在整个canvas上绘制一个矩形，并在其上捕获单击事件。 但这似乎是很多开销。

Answer 2

由于接受的答案对我不起作用（虽然它确实让我走上正轨）我想我会发布如何解决它以防万一我的位置还有其他人…

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

Answer 3

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

 //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" ) },