Ractive.jsでの"event.preventDefault();" #JavaScript

Ractive.js 僕にはとてもわかりやすいライブラリなので楽しいです。
以前つまずいていたことがあるので残しておきます。
タイトルをみて、「もう知ってる」という方は読む必要は無いです。

aタグにon-clickイベントをセット

例えばRactiveテンプレートで、aタグなどにon-clickイベントを仕込んで、

{{#element}}
<a href="#popup-{{id}}" on-click="popup:{{id}}">{{text}}</a>
{{/}}

popupイベントの引数をractive.data.popupElementにセットしたい。

ractive.on(
    popup: function(event,id){
        this.set('popupElement',id);
    }
)

以上の概念だけで書くと上記のようになるけど、
これだと"#popup1"へのhashchange eventがふつうに発火してしまい、
意図しない動作になることがあります（href属性を書かないとリンクタグとして表示されない）。

hashchange eventをキャンセルするには?

jQueryなどでよくやってたかんじで

//bad：使えません
ractive.on(
    popup: function(event,id){
        event.preventDefault();
        this.set('popupElement',id);
    }
);

と書いてしまいますが、これではhashchange eventをキャンセルできません。

RactiveはVirtual DOMを使っているというところがポイントでした。

ここで引数に入っているeventは、Virtual DOMのeventであって、
生DOMのeventではないということなのでした。
だから event.preventDefault(); としても何も起こらない。

でもちゃんと生のDOMのeventを取って来れます。

ちゃんとドキュメントに書いてありました。

event.original - the original DOM event, if available

正しい書き方

"event.original"で生のDOMのデータを拾えます。

ractive.on(
    popup: function(event,id){
        event.original.preventDefault();
        this.set('popupElement',id);
    }
);

または、これはjQueryなどでもよくやったやり方で、

ractive.on(
    popup: function(event,id){
        this.set('popupElement',id);
        return false;
    }
);

これでOK。hashchangeをキャンセルできます。

"return false"はRactive.jsのver 0.4などでは使えなかったのですが、ver 0.6から使えるようになったようで、

If you return false from a proxy event handler, ractive will automatically call both preventDefault() and stopPropagation() on the original DOM event.

"event.originalpreventDefault()" と "event.originalstopPropagation()"を両方発火するようです。
"preventDefault()" だけにしたい、という場合のみ、"event.original.preventDefault();"を使うのが良さそうです。

ドキュメントに書いてあるように、更にこのeventオブジェクトからはVirtual DOM内のいろんなデータを拾うことが出来て、自分で理解しているものでは

event.name //イベント名、上の例だと"popup"
event.node  //上の例だとクリックされた<a>要素のDOM node
            //data-属性などを拾うのに使える
event.keypath  //上の例だと"element.クリックされた要素のイテレーションのindex値"
event.original  //生のDOM

などがあります。いろいろ便利です。
これらの使い方によってはクリックイベント関数の引数がいらなくなったりします。