拉斐尔帆布(背景)onclick事件

Question

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

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

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

  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中的任何位置(不包括形状),然后触发事件.

谢谢.

Answer 1

由于接受的答案对我不起作用(虽然它确实让我走上正轨)我想我会发布如何解决它,以防我的位置有其他人...

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

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

使用jquery:

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

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