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

我一直在与拉斐尔合作在画布上创建拖放形状。我使用.drag（）函数（在Raphael框架中提供）以及我的事件函数执行此操作。我没有这个问题。拉斐尔画布（背景）onclick事件

我也有一个函数，创建一个新的形状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中的任何位置（不包括形状），并且事件将被触发。

谢谢。

来源

2010-11-11 Adam Holmes

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

使用jQuery：

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

否则，如果你是死心塌地使用拉斐尔的事件，你可以画一个矩形，在整个画布，在捕获点击事件。但是这似乎是一个很大的开销。

来源

2010-11-11 21:25:57

这个问题是，如果点击一个形状，该事件仍然被调用。我只希望背景适用于此事件。 – 2010-11-11 22:15:44

在myDblClick里面，检查event.originalTarget，如果它是节点“rect”等，然后触发一个自定义事件。 $（'＃canvas'）。trigger（'dblclick.raphDblClick'，{origEvent：event}）;.沿着这些线应该工作 – 2010-11-12 19:45:22

通常你会移动'纸'，所以'paper.canvas'也应该工作。 – tokland 2012-11-06 23:26:18

作为公认的答案并没有为我工作（虽然它确实让我在正确的轨道上），我想我会后我如何的情况下，解决它有其他人在我的位置......

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

来源

2011-10-17 14:37:16 musefan

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

来源

2011-12-18 13:52:59 Pascalius

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

回答

相关问题