8

次のjQuery関数があります：

  1. フォームを送信します

    $(".content").delegate('.entryButton','click', function() { var form = $(this).closest("form"); var id = form.attr('id'); var text = form.find("textarea").val(); Sijax.request('add_entry', [id, text]);

         //Prevent the form from being submitted (default HTML)
     return false;
 });

  2. フォームを拡大して入力ボタンを表示

    $("textarea").focus(function() { $(this).css('height', '80px'); var button = $(this).parent().next().children(); ボタン.css('visibility', 'visible'); button.css('height', '20px') });

  3. テキストエリアを小さくし、ボタンを非表示にします

    $("textarea").blur(function() { $(this).css('height', '30px'); var button = $(this).parent().next().children(); ボタン.css('高さ', '0px') });

これは、エントリを作成しようとすると発生します。

  • フィールドをクリックすると (フォーカス イベント)、フィールドが大きくなり、入力ボタンが表示されます
  • テキストを入力
  • エントリ ボタンを初めてクリックします。ここで、blur イベントが発生し、フィールドが再び小さくなりますが、クリック イベントは発生しません。
  • ボタンをもう一度クリックすると、フォームが送信されます

これは、blur イベントと click イベントが互いに干渉していることを意味していると思いますか?

ここで問題のフィドルを見つけることができます。フィールドにピントが合った状態でボタンを押すと、フィールドがぼやけますが、フィールドには入りません。フィールドがぼやけている状態でボタンを押すと、エントリが送信されます。

何か案は？

4

5 に答える 5

2 
$('.entryButton').on('click', function (e) {
    return false; // to prevent default form post
});
$("form").delegate('.entryButton','mousedown', function() {
    $('textarea').trigger('blur');
    var form = $(this).closest("form");
    var id = form.attr('id');
    var text = form.find("textarea").val();
    $("#test").append(text);                 

    //Prevent the form from being submitted (default HTML)
    return false;
});

フォーカスとブラー機能を以前と同じように維持します。

thanks.
于 2012-12-26T16:30:15.090 に答える
2

あなたの問題はclick、 のボタンで発生するmouseupことですが、高さを変更すると、発生したときにマウスがボタン上にない場所になりますmouseup。両方のイベントを発生させるには、mousedown代わりにclickand thentrigger('blur')を使用します。textarea

注:デフォルトのフォーム送信機能をキャンセルclickできるようにするには、まだイベントが必要です。return false

フィドル

于 2012-12-26T16:14:20.607 に答える
1

ここで問題となるのは、blurイベントよりも高速に動作するclickイベントです。そのため、最初にフォームを送信するのではなく、フィールドを小さくします。

click最初の行を からに変更するだけですmousedown:

$(".content").delegate('.entryButton','mousedown', function() {
// your code
});

または：

$(".content").bind('mousedown', function() {
// your code
});
于 2013-07-08T21:04:41.677 に答える
1

http://api.jquery.com/unbind/を快適に使用できることがわかりました

于 2013-11-21T08:25:12.527 に答える
0

高さを変更してリフローを強制するとクリックイベントがキャンセルされるようです。最も簡単な解決策はmousedown、クリックするのではなく使用するか (ぼかしの前に起動する)、css の変更を でラップすることsetTimeoutです。

于 2012-12-26T16:11:38.033 に答える