1

初心者の質問...

目的:

  • コマンド ライン入力の一種として、HTML テキスト入力フィールドを使用する予定です。

  • 順不同の HTML リストには、最新の 5 つのコマンドが表示されます。このリストの最後のコマンドの 1 つをクリックすると、コマンド ラインの入力テキスト フィールドにそれぞれのコマンドが入力されます (コマンドを再実行または変更するため)。

  • 順序付けられていない HTML リストには、結果セットが含まれています。このリストの ID をクリックすると、それぞれの ID がコマンド ライン入力テキスト フィールドに表示されます。

HTML (DHTML) の場合: 期待どおりに動作します。リンクをクリックすると、コマンド ラインの入力テキスト フィールドに最近のコマンドが入力されます。

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

Javascript ファイルの場合: 期待どおりに動作しません: リンクをクリックすると、コマンドライン入力テキスト フィールドにそれぞれの値が入力されます (当然のことです)。ただし、完全な HTML ページが表示されているようです。リロードすると、テキスト入力フィールドと動的に入力されたすべてのリストが空になります。

    function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}

ここでの質問: Javascript (構文) エラーの可能性以外に、ブラウザがページをリロードする原因は何ですか?

4

5 に答える 5

6

どちらの場合も、リンクをクリックするというデフォルトの機能をキャンセルするために何もしません。

プレーンな HTML の例では、ページのトップへのリンクをたどっています。

2 番目の例の href 属性がどのように見えるかは指定しませんが、それが何であれ、それに従います。

イベントのキャンセルと適切なイベント設計の適切な説明については、http://icant.co.uk/articles/pragmatic-progressive-enhancement/を参照してください。jQuery 固有のガイダンスについては、 http://docs.jquery.com/Tutorials:How_jQuery_Worksを参照してください。

于 2009-07-06T19:03:38.060 に答える
1

リンク先のURLをたどっているだけのようです。これは、デフォルトのクリック アクションを妨げていないためです。

e.preventDefault(); // `e` is the object passed to the event handler
// or
return false

あるいは、で始まる href を設定するか、要素をまったく#使用しない (代わりに使用する) こともできます — もちろんそれが実際のリンクでない場合です。<a><span style="cursor:pointer">

于 2009-07-06T19:06:21.597 に答える
1

変化する

$('.spa_id_href').click(function(){...

に

$('.spa_id_href').click(function(evt){...//notice the evt param

そして関数内で呼び出します

evt.preventDefault();
于 2009-07-06T19:09:19.657 に答える
0

これは基本的にイベントのキャンセルに関連しています...これを試してください：

try { (
   e || window.event).preventDefault(); 
} 
 catch( ex ) 
{ 
 /* do Nothing */ 
}
于 2009-07-06T20:50:34.053 に答える
-1

ここでの他の回答はイベントのキャンセルに関する優れた点を示していますが、JavaScript にイベントキャンセルコードの実行を妨げるエラーが含まれている場合、問題が発生します。(たとえば、コードをデバッグしている場合に当てはまるかもしれません。

追加の予防措置として、スクリプトのみをトリガーするリンクでは使用しないことを強くお勧めします。href="#"代わりに、次のvoid演算子を使用します。

<a href="javascript:void(0)" onclick="...">...</a>

hrefその理由は、イベントがキャンセルされない場合、ブラウザは属性によって提供された URL を読み込もうとするからです。「javascript:プロトコル」は、その値がundefined. 演算子は を返すために明示的に存在するためvoidundefined、ブラウザーは既存のページにとどまり、再読み込み/更新なしで、スクリプトのデバッグを続行できます。

これにより、JS のみのリンクのイベント キャンセルの混乱全体をスキップすることもできます (ただし、非 JS クライアントの「フォールバック」URL を持つリンクに添付されたコードでイベントをキャンセルする必要があります)。

于 2009-07-06T19:22:02.720 に答える