拉斐尔帆布（背景）onclick事件 [英] Raphael canvas(background) onclick event

问题描述

我一直在与Raphael合作，在画布上创建拖放形状。我使用.drag（）函数（在Raphael框架中提供）和我的事件函数来完成此操作。我没有遇到任何问题。

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.

我还有一个函数可以创建一个新的形状onDblClick，问题是，我只能将事件附加到形状或其他我创建的元素。

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

有没有人知道将点击事件附加到画布的方法，即我可以点击div中的任何地方（不包括形状），事件将被触发。

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.

谢谢。

推荐答案

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

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

使用jquery：

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

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

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.

这篇关于拉斐尔帆布（背景）onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！