模糊事件處理程序被jquery阻止preventDefault（）方法

Question

我正在開發一個交互式Web應用程序，當前在http://picselbocs.com/projects/goalcandy（用戶：demo@demo.com，密碼：demo）上設置。它允許您將包含圖像和/或文本的項目從左側欄拖到右側的工作區中，並調整其大小和/或編輯它們。

要編輯創建對象上的文本，只需點擊文本字段，標題或註釋。 <span>元素被替換爲<textarea>，然後您可以通過它編輯內容。當發生「模糊」事件時，textarea消失並將其值添加到<span>元素。 問題是，單擊對象的圖像（如果它同時具有圖像和文本字段）可防止「模糊」事件觸發。

我已經使用下面的代碼片斷來防止圖像被從父對象分開拖動，只是發現這是什麼導致的問題。但我不能沒有利用這一點，並在同一時間，我不使用它：

$(document).on('mousedown dragstart', 'img', function(event) { event.preventDefault(); }); 

我怎樣才能解決這個問題得到，並允許單擊圖像時onblur事件處理程序甚至可以運行，但同時保持默認的行爲預防？

PS：alert('blur')調用允許我監視事件何時觸發。

Answer 1

您可以使用一些變量說

var locks = {}; 
locks.textarea_lock = false; 

然後點擊設置textarea的在locks.textarea_lock = true;圖像處理程序檢查這個鎖：

$(document).on('mousedown dragstart', 'img', function(event) { 
    if (locks.textarea_lock) { 
     return; 
    } 
    event.preventDefault(); 
}); 

在 「模糊」 處理程序解鎖變量locks.textarea_lock = false;。