的onblur火災次數太多或根本

Question

我工作的一個交互式Web應用程序，目前建立在http://picselbocs.com/projects/goalcandy（用戶：demo@demo.com，密碼：demo）。它允許您將項目從左列拖到右側的工作區中，並調整大小/編輯它們等等。

今天，我一直在努力的目標文本編輯功能，並接觸過一些非常奇怪的行爲，我無法找到源頭。如果您首先單擊新創建的對象（編輯該文本）中的文本字段，然後在文本框外單擊，則會觸發警報消息（我僅將其用於測試目的）。問題是，如果您再次在同一個文本字段內單擊，然後在外部單擊，警報會觸發越來越多次。 總之，對於「模糊」事件的事件處理程序觸發越來越多的時候，每一個新的文本編輯嘗試。這是爲什麼？我錯過了什麼？ 我不是所有的使用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

你重新添加模糊事件你點擊文本區域每次。這不會覆蓋舊的，它增加了一個新的。

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