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事件时已经死定，则可以在整个画布上绘制一个矩形，并在其上捕获单击事件。但这似乎是很多开销。

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

2 个答案: