onblur発砲回数が多すぎるか全くない

Question

私は現在、http://picselbocs.com/projects/goalcandy（ユーザー：demo@demo.com、パスワード：demo）に設定されている対話型Webアプリケーションで作業しています。アイテムを左の列から右のワークスペースにドラッグしてサイズ変更/編集することができます。

今日、私はオブジェクトのテキスト編集機能に取り組んできましたが、ソースを見つけることができない非常に奇妙な動作に出くわしました。新しく作成したオブジェクト内のテキストフィールドを最初にクリックして（そのテキストを編集するために）、テキストボックスの外側をクリックすると、警告メッセージが表示されます（テスト目的でのみ使用します）。問題は、同じテキストフィールド内をもう一度クリックしてその外をクリックすると、アラートがますますトリガされることです。 要するに、「ぼかし」イベントのイベントハンドラは、新しいテキスト編集を試みるたびにますます頻繁に発生します。何故ですか？私は何が欠けていますか？ FirebugやChromeのデバッグモジュールで経験したことはありません。少なくとも、この場合私を助けてくれるより微妙な機能ではなく、問題の原因を見つけることができません。しかし、

タイトルに記載されている別の奇妙な問題は、オブジェクトにテキストと画像の両方がある場合、オブジェクトのイメージをクリックすると警告がトリガーされないということです。それ以外の場合は、 "オブジェクト画像のほかに何か他のものをクリックしない限り、全く発射しません。それがどうして起こるのか？

ここで "ぼかし" イベントハンドラを体現（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(); 
      }); 

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

Answer 1

テキスト領域をクリックするたびにblurイベントを追加し直しています。それは古いものを上書きしません、それは新しいものを追加します。

Answer 2

あなたはこのような再追加イベントハンドラにあります

    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();