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

実際、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フィドルをセットアップして、それがどのように機能するかを示します：こちら

于 2013-08-21T22:11:20.700 に答える
2

編集 ：

Dan Lee が意図したソリューションは、よりうまく機能しています。

于 2012-08-14T11:50:36.807 に答える
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);
});
于 2013-08-12T07:44:20.860 に答える