0

これは単純な html です:

<form method="post">
    <input type="hidden" name="default_action" value="default_action_value" />
    <input type="text" name="count" value="1" />
    <input type="submit" value="Button!" />
    <button class="btn" type="submit" name="action" value="action value">Button 2!</button>
</form>

と js コード:

(function (window, document, $, undefined) {$(document).ready(function($){
    var $doc = $(document);
    $doc.on('submit', 'form', function (e) {
        console.log('submit form!');        
        e.preventDefault();
    })
    .on('click', 'form', function (e) { 
        console.log('click on form (propagation)!');
    })
    .on('click', 'form :submit', function (e) {
        console.log('click on button!');
    });
});})(this, document, jQuery);

(フィドル)

任意の送信ボタンをクリックすると、コンソールに次のメッセージが表示されます。

ボタンをクリックしてください！

フォーム（伝播）をクリックしてください！

フォームを提出してください！

ええOK。計画通り。しかし、カーソルをテキストフィールドにセットして「Enter」を押すと（ボタンをクリックせずに）、コンソールメッセージ：

フォーム（伝播）をクリックしてください！

ボタンをクリックしてください！

フォーム（伝播）をクリックしてください！

フォームを提出してください！

o_O? なんてこと？！送信ボタンがクリックされませんでした! これは私にとってまさに魔法です..

html から送信ボタンを削除します。

<form method="post">
    <input type="hidden" name="default_action" value="default_action_value" />
    <input type="text" name="count" value="1" />
</form>

(フィドル)

そして、「Enter」ボタンでフォームを送信しようとしています。コンソール ログ:

フォーム（伝播）をクリックしてください！

フォームを提出してください！

これは、前の例で見られると予想されます。しかし、なぜjQueryは最初に見つかった送信ボタンに対してイベント「クリック」を発生させるのですか?

私の最初のタスクは、「送信」イベントのソースを定義することです。送信ボタンをクリックするか、「Enter」を押します。しかし、実際に「Enter」を押したときにjQueryが送信ボタンで「クリック」を起動した場合、どうすればよいですか? どのように？なんで？

4

1 に答える 1

0

これは最新の HTML5 仕様に準拠していると思います。

「Enter」を押すと、最初に配置された要素で「クリック」イベントがトリガーされます。これが、ボタンの 1 つに対してクリック イベントが 1 回だけ発生する理由です。

フォームで Enter キーを押したときにボタンのクリック イベントをトリガーする必要がない場合は、inputs キープレス イベントで ENTER キー イベントを除外できます。

$('input[type="text"]').keypress(function (e) {
   var code = e.keyCode || e.which;
    if (code === 13) {
        e.preventDefault();
        $("form").submit(); 
    }
});

タイプ送信で「入力」を使用する代わりに、「ボタン」要素タイプを使用する（およびクリックイベントをフックしてフォーム送信を行う）など、他の回避策があります。type="submit" を type="button" に変更すると、送信時にクリックが発生しなくなります。

于 2013-07-24T18:19:03.330 に答える