Raphael.js中的火災事件

Question

我有一個帶有單擊事件處理程序的Raphael元素：

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

如何手動觸發此事件？ （ c.click()不起作用）
謝謝！

Answer 1

盡管已經回答了這個問題，但是我將發布我隨機發現的解決方案。 Raphael內部結構有可能：

當您附加一個事件監聽器（例如element.click(func) ， element對象將保存一個包含所有事件的數組。 在此數組中，有一個對象，該對象具有觸發事件的方法f （奇怪的命名約定）。

因此， c.events[0].f(); ，您可以在知道事件順序的情況下調用事件，在您的情況下，只有索引為0的click事件，您可以這樣調用它： 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事件，則會全部觸發。

這里有個小提琴來演示。

Answer 2

編輯：

Dan Lee設計的解決方案效果更好。

Answer 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

Answer 4

實際上，我發現了一種使用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小提琴以演示其工作原理： 這里

Answer 5

我為此編寫了一個插件，使用事件來計算正確的位置；

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