我有一个带有点击事件处理程序的Raphael元素:
var paper = Raphael("container", 770, 160);
var c = paper.rect(10, 10, 50, 50);
c.click(function () {
alert("triggering");
})
我如何手动触发此事件? (c.click()
不起作用)
谢谢!
答案 0 :(得分:13)
虽然这个问题已经得到解答,但我会发布我随机发现的解决方案。 拉斐尔的内部成员可能会这样做:
当你附加像element.click(func)
这样的事件监听器时,element
对象会包含一个包含所有事件的数组。在这个数组中有一个对象,它有一个触发事件的方法f
(奇怪的命名约定)。
总而言之,您可以通过了解事件的顺序来调用您的事件,在您的情况下,只有click
事件位于索引0上,您可以将其称为:c.events[0].f();
更通用的解决方案是像
这样的功能function triggerClick(element) {
for(var i = 0, len = element.events.length; i < len; i++) {
if (element.events[i].name == 'click') {
element.events[i].f();
}
}
}
但请注意,如果您有多个click
个事件,则会触发所有事件。
Here's a fiddle来演示。
答案 1 :(得分:2)
编辑:
Dan Lee的目标解决方案正在改善。
答案 2 :(得分:2)
虽然这已经回答了一段时间,但我在寻找一些本质上更“本土”的东西。这是我如何在不依赖Mootools或jQuery的情况下实现它。
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('click', true, false);
c.node.dispatchEvent(evObj);
这基本上在浏览器中创建事件,然后将其调度到与Raphaël对象关联的节点。
这里还有MOZ链接供参考: https://developer.mozilla.org/en-US/docs/DOM/document.createEvent
答案 3 :(得分:2)
我实际上找到了一种更优雅的方式来使用Kris的方法。 Raphael支持元素对象的原生扩展,因此我构建了一个小补丁来将触发器方法添加到raphael
这里是:
//raphael programatic event firing
Raphael.el.trigger = function (str, scope, params){ //takes the name of the event to fire and the scope to fire it with
scope = scope || this;
for(var i = 0; i < this.events.length; i++){
if(this.events[i].name === str){
this.events[i].f.call(scope, params);
}
}
};
我设置了一个Js小提琴来展示它是如何工作的:here
答案 4 :(得分:0)
我为此编写了一个插件,使用事件来计算正确的位置;
Raphael.el.trigger = function(evtName, event) {
var el = this[0]; //get pure elements;
if (event.initMouseEvent) { // all browsers except IE before version 9
var mousedownEvent = document.createEvent ("MouseEvent");
mousedownEvent.initMouseEvent (
"mousedown", true, true, window, 0,
event.screenX, event.screenY, event.clientX, event.clientY,
event.ctrlKey, event.altKey, event.shiftKey, event.metaKey,
0, null);
el.dispatchEvent (mousedownEvent);
} else {
if (document.createEventObject) { // IE before version 9
var mousedownEvent = document.createEventObject (window.event);
mousedownEvent.button = 1; // left button is down
el.fireEvent (evtName, mousedownEvent);
}
}
};
用法:
circle2.mousedown(function(e) {
var circle = this.clone();
circle.drag(move, down, up);
circle.trigger("mousedown", e);
});