拉斐尔画布(背景)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.
推荐答案
我只需附加常规click事件(使用普通javascript或任何js框架,正在使用)到画布节点(或包含#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屋!