ビューにRiot.jsを使っています。
tagファイルの中にaタグを使ってボタンを設置していて、onlick
ハンドラを使ってイベントを設定しています。
javascript
1<page-movie-detail> 2 <post-detail detail={opts.movie.detail}></post-detail> 3 <div><a class="moviestart_btn" href="" onclick={movieStart}>動画スタート</a></div> 4 <video src={opts.movie.url} controls></video> 5 <style> 6 video { display: none; } 7 </style> 8 <script> 9 movieStart = function (e) { /* some functions.. */ } 10 </script> 11</page-movie-detail>
Riot.jsの公式に、e.preventDefault()
は事前に設定してるよ!と書いてあり、実際にハンドラを設定しているものは、デフォルトの挙動が動作しないようになっています。
しかし、イベント内でエラーが起こってしまうと、そのままデフォルトの挙動が発生してしまい(今回の場合でいうと、aタグなので画面遷移してしまい)エラーのデバッグが難しくなっている状況です。
javascript
1<page-movie-detail> 2 <post-detail detail={opts.movie.detail}></post-detail> 3 <div><a class="moviestart_btn" href="" onclick={movieStart}>動画スタート</a></div> 4 <video src={opts.movie.url} controls></video> 5 <style> 6 video { display: none; } 7 </style> 8 <script> 9 movieStart = function (e) { 10 doError(); // 定義されていない関数を実行するなどして、エラーが発生すると画面が遷移してしまう 11 } 12 </script> 13</page-movie-detail>
ひとまず、aタグをpタグに変換して画面遷移しないように対処していますが、これはRiot.jsの仕様なのでしょうか?
またみなさんはどのように対処されていますでしょうか?
回答1件
あなたの回答
tips
プレビュー