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

【问题标题】：Raphael canvas (background) onclick event拉斐尔画布（背景）onclick事件
【发布时间】：2011-05-08 15:21:57
【问题描述】：

我一直在与 Raphael 合作，在画布上创建拖放形状。我使用.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 中的任何位置（不包括形状）并且将触发事件。

【问题讨论】：

标签： javascript jquery frameworks dom-events raphael

【解决方案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
    }
}

【讨论】：

【解决方案2】：

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

使用 jquery：

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

否则，如果您不喜欢使用 Raphael 事件，您可以在整个画布上绘制一个矩形，并在其上捕获点击事件。但这似乎是很多开销。

【讨论】：

这个问题是，如果单击形状，事件仍然会被调用。我只希望背景适用于这个事件。
在 myDblClick 内部，检查 event.originalTarget，如果它是节点，则为“rect”等，然后触发自定义事件。 $('#canvas').trigger('dblclick.raphDblClick', {origEvent:event});。这些方面的东西应该可以工作
通常你移动paper，所以paper.canvas也应该可以工作。

【解决方案3】：

musefans 解决方案与 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" )

},

【讨论】：