4

問題のセットアップは、http: //jsfiddle.net/5hAQ8/9/でテストおよび変更できます。

私は小さなフォームを持っています(基本的には、クリアボタンのある入力フィールドだけです)。JavaScript は簡単で、問題を説明するだけです。基本的には、入力 (キーアップ)、ボタン (クリック/タップ)、フォーム (送信) の 3 つのリスナーです。HTML は非常に単純です。

<form>
    <input>
    <button>X</button>
</form>

X はフィールドをクリアするためのものですが、それは重要ではありません。誰かが を押す[enter]と、入力がフォーカスされていても、ボタンがトリガーされます。上記のリンクされた jsfiddle でこれを自分でテストできます。

フォーム内を押す[enter]と、入力用、ボタン用、フォーム用の 3 つのアラートが表示されます。なぜボタンとフォームが関係するのか理解できませんか?

私のDOMイベントの理解は、入力から発生し、ドキュメントにバブルアップするキーボードイベントでした。しかし、私はそのイベントをキャンセルするためにあらゆる手段を講じました。だから私の質問は3つあります:

  • なぜイベントが<button>まったく発生するのですか?
  • イベントがキーアップであるにもかかわらず、ボタンがリスナー(クリックとタップである)をトリガーするのはなぜですか?
  • preventDefaults / stopPropagations が作動しないのはなぜですか。
4

2 に答える 2

2

type="button"ボタン要素を設定することで問題を解決できます。これにより、ブラウザのデフォルトの動作が回避されます。

可能な値は次のとおりです: submit...、reset...、button: ボタンにはデフォルトの動作はありません。イベントが発生したときにトリガーされる、要素のイベントに関連付けられたクライアント側スクリプトを持つことができます

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

于 2015-09-02T11:45:12.560 に答える