Vue.js のイベント装飾子で preventDefault と stopPropagation

2017年8月27日

Vue.js 2では、テンプレートでイベント装飾子を使うと簡単にpreventDefaultやstopPropagationを定義できます。

参考：
イベントハンドリング – Vue.js

event.preventDefault -> .prevent

<br />
&lt;a href=&quot;#&quot; @click.prevent=&quot;ファンクション&quot;&gt;link&lt;/a&gt;<br />

event.stopPropagation -> .stop

<br />
&lt;a href=&quot;#&quot; @click.stop=&quot;ファンクション&quot;&gt;link&lt;/a&gt;<br />

重ね付け

<br />
&lt;a href=&quot;#&quot; @click.prevent.stop=&quot;ファンクション&quot;&gt;link&lt;/a&gt;<br />

サンプル

formの枠をクリックで背景色が点滅
リンク先の設定してあるリンクにclickイベントを付与し、.preventと.stopのサンプル
actionでURLが設定してあるformのbuttonにclickイベントを付与し、.preventと.stopのサンプル

See the Pen Vue.js event modifier by webdev (@webdev-jp-net) on CodePen.0

関連記事