8

我有一个带有点击事件处理程序的 Raphael 元素：

var paper = Raphael("container", 770, 160);
var c = paper.rect(10, 10, 50, 50);
c.click(function () {
    alert("triggering");
})

我如何手动触发此事件？（c.click()不工作）
谢谢！

4

5 回答 5

13

虽然这个问题已经回答了，但我会发布我随机找到的解决方案。Raphael 内部结构是可能的：

当您像这样附加事件侦听器时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事件都被触发。

这是一个要演示的小提琴。

于 2012-08-14T15:19:34.823 回答
3

尽管这已经在不久前得到了回答，但我一直在寻找一些在自然界中更“原生”的东西。以下是我不依赖 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

于 2013-01-31T22:33:05.757 回答
2

编辑 ：

Dan Lee 提出的解决方案效果更好。

于 2012-08-14T11:50:36.807 回答
2

我实际上找到了一种更优雅的方式来使用 Kris 的方法。Raphael 支持 element 对象的原生扩展，所以我构建了一个小补丁，将触发方法添加到 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 fiddle 来展示它是如何工作的：这里

于 2013-08-21T22:11:20.700 回答
0

我为此写了一个插件，使用event来计算正确的位置；

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);
});
于 2013-08-12T07:44:20.860 回答