6

私が取り組んでいる Web サイトでこの奇妙なコードに出くわしましたが、私が見ている動作がどのように、またはなぜ起こっているのか理解できません。

<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />

(href を変更しました。実際には、フォームのアクションと同じ URL を指していました)。

フォームが送信される前にイベントが発生するため、onclickこのコードによってページが Google.com にリダイレクトされ、ページの実行が停止され、フォームが送信されないことが予想されます。または、Google.com にリダイレクトしても、フォームの送信が完了する可能性があります。

しかし、リダイレクトが完全に無視され、フォームがとにかく送信されるようです。なぜこれが起こるのでしょうか？イベントが問題なく発生
することを確認しました。onclickリダイレクトを関数に移動し、その関数を で呼び出しましたonclick。関数は送信前に正常に呼び出されましたが、リダイレクトは無視されたようです。

4

4 に答える 4

0

あなたが観察しているのは、HTMLInputElementオーバーライドされない限り、のハンドラーのデフォルトおよび継承された動作です。

解決：

代わりにHTML5 ボタンの type-submit 要素を使用してください。これは、最新のすべてのブラウザーで正しく処理できるはずです。

<form action="/" method="post" onsubmit="alert('submit event')">
  <input type="text" name="someinput" value="100">
  <button type="submit" onclick="alert('button onclick handled before form-submit')">submit</button>
</form>

説明：

特定のブラウザを提供していませんが、以前にonsubmit/onclickイベント階層に問題があった WebKit を使用している可能性があります。

プロジェクトのコード サイトで、さまざまな HTMLElement を実装するコードを検索できます。
たとえば、onsubmitを検索すると、Webkit onsubmit-event バブリング テストが表示されます。

このイベント バブリングの問題を回避する 1 つのオプションは、 を使用し、buttonそれを囲むフォームを見つけて関数 を介して送信することにより、それを「送信」にレンダリングすること(HTMLFormElement-instance).submit()です。

もう 1 つは、探しているフォームの送信ハンドラーを変更することです。

<form action="/" method="post" accept-charset="utf-8" id="myform3"
   onsubmit="event.stopPropagation(); event.cancelBubble = true;">
   A form with the default Browser submit-handler overwritten:
   <br>
   <input type="text" name="someinput" value="100">
   <input type="submit" name="commit" value="Submit" 
     onclick="alert('will alert first and submit later  using the browser default submit handler.');">
 </form>

このfiddleでは、すべてのケースが示されています。

乾杯！

于 2013-08-25T11:42:28.847 に答える
0 
<form action="http://www.yahoo.com" method="get">
<input type="submit" value="Save" onclick="document.location.href='http://www.google.com'" />
</form>

[保存] ボタンをクリックすると、ブラウザーによっては、onclick イベントに return false を追加しない限り、Yahoo (Chrome) にリダイレクトされることがわかりました。IE 10 では、Google にリダイレクトされます。

ブラウザをコーディングした人がこれに答える必要があると思います。

于 2013-08-25T05:46:21.270 に答える
0

これは賛否両論あると思いますが、

行動面でお答えしますが、

フォームのデフォルトのメソッドはGET、送信ボタンを押すとフォームがデータを取得するようになっています。ソースの古い投稿

e.preventDefault()ただし、document.location.href="http://www.google.com" に含めている場合

リンクが index.html の場合、元のリンクを削除したため、ローカル インデックス ページが Web サイト アドレスに対して呼び出されます。元のリンクが使用された理由を判断することはできません!!!???

あなたの質問では、このコードを実行すると言えます。

<form onsubmit="javascript:alert('Form Submit called '+ this.method);">
    <input type=submit value=Submit onclick="javascript:document.location.href='http://www.google.com';alert('Button Submit');" />
</form>

これにより、フローの呼び出しがクリアされます。これを使用して document.location.href が変更されることはないため..

href を変更した後にこのコードを使用するalert(document.location.href);と、変更されていない場所が得られます。

デフォルトの動作がこれを変更する可能性がありますが、それはコードの一部ではありません..

これにより、物事がより明確になることを願っています。

于 2013-08-28T06:27:38.227 に答える