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

发布于 2024-10-02 03:09:46 字数 529 浏览 7 评论 0原文

我一直在与 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 中的任何位置（不包括形状）并且该事件将被触发。

原文

I have been working with Raphael to create drag and drop shapes on a canvas. I do this using the .drag() function (supplied in the Raphael framework) along with my event functions. I have no issues doing this.

I also have a function that creates a new shape onDblClick, the problem is, I can only attach the event to a shapes, or other elements I create.

Adding events to a shape works like so:

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

Using the same principle on the canvas doesn't work:

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

Does anybody know a way to attach click events to the canvas, i.e. I can click anywhere in the div (excluding shapes) and the event will be triggered.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岛歌少女 2024-10-09 03:09:46

由于接受的答案对我不起作用（尽管它确实让我走上了正轨），我想我会发布我如何解决它，以防有其他人处于我的位置......

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

As the accepted answer didn't work for me (though it did get me on the right track) I thought I would post how I solved it in case there is anybody else in my position...

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

回复收藏 0 原文

薄情伤 2024-10-09 03:09:46

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

使用 jquery：

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

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

I would just attach the regular click event (with vanilla javascript, or whatever js framework you are using) to the the canvas node (or the parent node that contains the #canvas element).

With jquery:

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

Otherwise, if you are dead-set on using Raphael events, you could draw a rectangle over the entire canvas, and capture click events on that. but that seems like a lot of overhead.

回复收藏 0 原文

情深如许 2024-10-09 03:09:46

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" )

},

musefans solution with IE compatiblity. Thanks

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

},

回复收藏 0 原文

~没有更多了~