0

現在、 http ://picselbocs.com/projects/goalcandy (ユーザー: demo@demo.com、パスワード: demo)にセットアップされているインタラクティブな Web アプリケーションに取り組んでいます。左側の列から右側のワークスペースにアイテムをドラッグし、サイズ変更/編集などを行うことができます。

今日、私はオブジェクトのテキスト編集機能に取り組んでおり、ソースが見つからない非常に奇妙な動作に遭遇しました。新しく作成されたオブジェクト内のテキスト フィールドをクリックして (そのテキストを編集するため)、テキスト ボックスの外側をクリックすると、アラート メッセージがトリガーされます (これはテスト目的でのみ使用しました)。問題は、同じテキスト フィールド内をもう一度クリックしてから外側をクリックすると、アラートがトリガーされる回数が増えることです。 つまり、「blur」イベントのイベント ハンドラーは、新しいテキスト編集の試行ごとに、何度も発生します。何故ですか？私は何が欠けていますか？ 私は、Firebug や Chrome のデバッグ モジュールの経験がすべてではありません。少なくとも、この場合に役立つ可能性のあるより微妙な機能については経験していません (そうなると思います)。問題の原因を見つけられません。しかし

タイトルで言及されている他の奇妙な問題は、オブジェクトにテキストと画像の両方がある場合、オブジェクトの画像をクリックしてもアラートがトリガーされないことです...そうでなければ、「ぼかし」のイベントハンドラーはまったく起動しませんオブジェクトの画像以外のものをクリックしない限り。なぜそれが起こるのですか？

「blur」イベント ハンドラを具体化するコード (jquery を使用) を次に示します。

var jqSelector = "#mesh div.mesh-obj span";
        $(document)
            .on("mouseover mouseenter", jqSelector, function(event) { 
                event.stopPropagation();
                $(this).css({'background-color':'#FF9', 'cursor':'text'});
            })
            .on("mouseout mouseleave", jqSelector, function(event) { 
                event.stopPropagation();
                $(this).css({'background-color':'transparent', 'cursor':'inherit'});
            })
            .on("mousedown", jqSelector, function(event) { 
                event.stopPropagation();    // prevent activating the parent object's "mousedown/click" event handlers
            })
            .on("click", jqSelector, function(event) { 
                event.stopPropagation();    // prevent activating the parent object's "mousedown/click" event handlers

                //alert('click');

                // Cache jQuery objects
                var jqSpan = $(this),
                    jqPre  = jqSpan.parent(),
                    jqTextarea = jqPre.parent().find('textarea').first();

                // "Replace" the <pre> element with the <textarea>
                jqPre.css('visibility','hidden');
                jqTextarea
                    .show()
                    .text(jqSpan.text())
                    .val(jqSpan.text())
                    .css('background-color','#ff9')
                    .on('click mousedown dblclick', function(event){ event.stopPropagation(); })
                    .on('blur', function(event){
                        event.stopPropagation();
                        // Hide the <textarea> element and make the <pre> visible again
                        jqSpan.text(jqTextarea.val());
                        jqTextarea.hide();
                        jqPre.css('visibility','visible');
                        alert('blur');
                        //jqTextarea.off('blur');
                    })
                    .focus();
            });

助けてください！ありがとう。

4

2 に答える 2

2

テキスト領域をクリックするたびに、ぼかしイベントを再追加しています。それは古いものを上書きするのではなく、新しいものを追加します。

于 2012-05-08T09:22:21.223 に答える
1

次のようにイベントハンドラーを再度追加する必要があります。

                  jqTextarea
                    .show()
                    .text(jqSpan.text())
                    .val(jqSpan.text())
                    .css('background-color','#ff9')
                    .off('click mousedown dblclick')
                    .on('click mousedown dblclick', function(event){ event.stopPropagation(); })
                    .off('blur') // remove event listener
                    .on('blur', function(event){
                        event.stopPropagation();
                        jqSpan.text(jqTextarea.val());
                        jqTextarea.hide();
                        jqPre.css('visibility','visible');
                        alert('blur');
                    })
                    .focus();
于 2012-05-08T09:27:09.927 に答える