0

間違ったタイプの入力に onclick ハンドラーがある場合にブラウザー (Google Chrome、FF、IE、および Opera すべて最新バージョン) がどのように動作する必要があるかについて、HTML 仕様には何も見つかりませんでした。 :)

私は次の html を使用し、ブラウザーが何らかのエラー (おそらく開発者コンソールのログで) を返したと想像しましたが、ページ全体をリロードするだけです!

<!DOCTYPE html>
<html>
<body>
    <form class="form-inline">
        <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'">Broken Button</button>
        <button type="button"       onclick="document.getElementById('magic').innerHTML='clicked button'"       >Button</button>
    </form>
    <p id="magic"></p>
</body>
</html>

ご覧のとおり、最初のボタンのタイプは間違っていますが、2 番目のボタンのタイプは正しいです。両方のボタンの onclick-handler はほぼ同じです。唯一の違いは、変更された段落のテキストです。

最初のボタンをクリックすると、段落のテキストが変更され、ページ全体がリロードされ、空の段落になります。2 番目のボタンをクリックすると、すべてが期待どおりに機能し、段落のテキストが変更されるだけです。リロードは必要ありません。

では、ページ全体のリロードが 4 つの主要なブラウザーすべてでデフォルトの動作である理由を教えてください。ブラウザーはボタンの入力ミスについてヒントを出すべきではありません (おそらく、開発者コンソール ログにエラー メッセージを出力することによって)。私にとって、これは非常に紛らわしいです:(

4

2 に答える 2

1

ボタンは の中にあるためページをリロードしているため<form>、フォームが送信されているかのように動作しています。

return false;最後に最初のを追加しonclickます。

<form class="form-inline">
    <button type="button color" onclick="document.getElementById('magic').innerHTML='clicked broken button'; return false;">Broken Button</button>
    <button type="button"       onclick="document.getElementById('magic').innerHTML='clicked button';"       >Button</button>
</form>

それでうまくいくはずです！

于 2013-03-28T10:51:44.660 に答える
0

要素のtype属性のデフォルト値は です。これは、そのような要素がクリックされると、最初にイベント ハンドラーが実行され、次に (ハンドラーがこれを抑制しない限り) フォームが送信されることを意味します。実際には、ブラウザーは要素の属性をページの URL にデフォルト設定するため、この場合、ページはリロードされます。buttonsubmitonclickactionform

コードでは、type="button color"は構文的に誤りで無視されるため、デフォルトtype=submitが適用されます。属性の指定type="button"は正しく、button要素を「純粋なボタン」にするため、クリックしてもスクリプトの効果のみが得られ、フォームの送信はありません。

buttonいくつかの要素を特別な方法でスタイルしたい場合は、class属性を使用して<button type="button" class="color">ください。このtype属性は、限定された一連のキーワードのみを値として取り、それぞれに固定の意味があります。

于 2013-03-28T11:56:55.383 に答える