過去ログ表示


過去ログ 351 を表示

トピック内全 2 記事中の 1 〜 2 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

(環境: WinXP SP3/Firefox3.5)

以下のようなリンクがあります。
<a href="#" onclick="xxxxx();return false;">linktest</a>
xxxxx()の内容は、同画面に配置されたhiddenのsubmitボタンをclick()することでサーバ側の処理が走るようにしています。

このリンクをダブルクリックすると、1度目のクリックでonclickイベント実行、2度目のクリックでhrefへ遷移、という動作になります。(クリックのタイミングによります。)しかし、onclickイベント後は遷移させたくありません。
回避方法としては「href="javascript:void(0)"」でhrefを必ず空にしてやれば遷移することはないのですが、なぜダブルクリックでこのような現象が起こるのか知りたいです。

よろしくお願いいたします。

(環境: WinXP SP3/Other)

> 以下のようなリンクがあります。
> <a href="#" onclick="xxxxx();return false;">linktest</a>
> xxxxx()の内容は、同画面に配置されたhiddenのsubmitボタンをclick()することでサーバ側の処理が走るようにしています。
> このリンクをダブルクリックすると、1度目のクリックでonclickイベント実行、2度目のクリックでhrefへ遷移、という動作になります。(クリックのタイミングによります。)しかし、onclickイベント後は遷移させたくありません。

考えられるケースの一つに バグ 4361 / bug-org 199430 があります。
> http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4361
> バグ 4361 onClickでform.submit()を行うボタンが連続してクリックされると、
> サブミットの結果のページでそのonClickイベントの処理が実行される
> bug-org 199430 eventhandlers still fire while a new page is loading
> bug-org 252542 The attached events are not removed while reloading the page. JavaScript errors are occuring

<a id=here" href="#bottom" onClick="xxxx();return flase;">とし、bottomというアンカーを離れたところにおくと、どのタイミングで移動が行われているかを判別しやすいかもしれません。
onClick="XXX();..."のfunction XXX()が、サブミット前のページには定義されているが、サブミット後のページには定義されていないとか、
xxx()の中で使用するグローバル変数(window.変数名で保持される)が、サブミット前のページにはあるがサブミット後のページにはない、
というようにすると、スクリプトエラー(シンタックスエラー、実行エラー、エクセプションなど)が起こるので、ポイントしたバグによるものかどうかの判定がしやすくなります。

一回目のonClick="xxxx();return false"で一つ目のsubmitボタンのクリックイベントが作られ、一つ目のa href="#"のクリックイベントの処理がキューされる(return falseがあるので、a hrefを処理しようとした時に実行しない)、
その後、一つ目のsubmitボタンのクリックイベントの処理と、
二回目のクリックによるニ回目のonClick="xxxx();return false"で二つ目のsubmitボタンのクリックイベントが作られ、二つ目のa href="#"のクリックイベントの処理がキューされる、(return falseがあるので、a hrefを処理しようとした時に実行しない)、
が平行して起こり、
そして、二つ目のsubmitボタンのクリックイベントが処理される、
という進行になります。
これだと、ダブルクリックだけで、サブミット処理を実行したあと(一回だけ)、二つ目のクリックイベントや二つ目のsubmitボタンのクリックイベントが残りそれが新規ページで実行される、というようなことが、簡単に起こるのかもしれません。

ポイントしたバグの、submitのケースでは、onClickでsubmit_button.click();ではなく、onClickでform_name.submit();で行っていて、クリックをすばやく何回も繰り返さないとバグを再現できませんでした。
また、ほぼ確実に簡単に問題を再現させられるテストケースは、複数のDIVにonMouseOverとonMouseOutを仕掛け、複数のDIVの上でマウスをすばやく動かしてイベントを数多く溜め込んでおき、その状態でリロード、でした。
document.forms["formname"].submit();とかdocument.getElementById("id_of_form").submit();だと、ほとんど問題を引き起こせない、ということはないですか?

なお、bug-org 199430 の現象を再現できなくなったのは、Firefox 3.6.0のベータからです。

他には、入れ子になった<form action=URL-1>や<a href=URL-2>などと同様の現象も混じっているケース。
<form action=URL-1><a href=URL-2><input type=submit></a></form>
<a href=URL-2><form action=URL-1><input type=submit></form></a>
のような場合、クリックのあと、URL-1に移動、URL-2に移動、URL-1に移動後URL-2に移動、URL-2に移動後URL-1に移動、のどれが正しい動きでしょう?
このあたりの動きも、buttonタグと他のタグで異なるとかがあったような記憶があります。
当然ながら、ブラウザーによって様々。
正しいHTMLで、明確に動きが規定されているような安全な範囲でHTMLを書かないと、余計な問題に悩まされることになります。

> <a href="#" onclick="xxxxx();return false;">linktest</a>
> xxxxx()の内容は、同画面に配置されたhiddenのsubmitボタンをclick()することでサーバ側の処理が走るようにしています。

onClickハンドラーでform.submit()を実行あるいはsubmit_button_in_form.click()を実行する、という目的だけのために、リンク(<a>)を使用する理由は何ですか?

そういった目的のためには、button タグが用意され、form要素の外での使用も正規の使用方法になっています。
onClickはリンクくらいしか指定できない相当古いブラウザーとか、テキストしかサポートしていないブラウザーなどへの対応などが必須なのですか?
buttonとJavaScriptでのフォームのsubmit()やclick()は、どちらが先だっけ?

a href="#"と、アンカーの名前がヌルになるものを意図的に使う理由は何ですあ?

アンカーの名前がヌルの場合は存在しないアンカーと同様の処理になるのが一般的なはずですが、
存在しないアンカーに対する処理なんてなものは規格で定めていないので、
トップに移動するブラウザもあれば全く移動しないブラウザもありますし、バージョンによって異なる場合もあります。
"return false;"だから無関係、なのかも知れませんが、少なくとも、ユーザーがJavaScriptを殺していた場合の挙動には関係してきます。


このトピックの全ページ / [0]

返信不可


- Child Tree -