Обработчик события Blur заблокирован методом jquery preventDefault()

Question

Я работаю над интерактивным веб-приложением, которое в настоящее время настроено на http://picselbocs.com/projects/goalcandy (пользователь: demo@demo.com, password: demo). Он позволяет перетаскивать элементы, содержащие изображения и/или текст с левой боковой панели, в рабочее пространство справа и, кроме всего прочего, изменять их размер и редактировать.

Для редактирования текста на созданных объектах просто щелкните текстовое поле, название или комментарий. Этот элемент <span> заменяется на <textarea>, через который вы можете редактировать содержимое. Когда происходит событие «размытия», текстовое поле исчезает, и его значение добавляется к элементу <span>. Проблема заключается в том, что нажатие на изображение объекта (если оно имеет как изображение, так и текстовые поля) предотвращает запуск «размытия».

Я использовал следующий фрагмент, чтобы предотвратить перетаскивание изображений отдельно от родительских объектов, и только что выяснил, что именно это вызывает проблему. Но я не могу не использовать это, и в то же время я должен не использовать:

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

Как я могу обойти эту проблему и разрешить обработчик события ONBLUR работать даже при нажатии на изображение, но в то же время поддерживать предотвращение поведения по умолчанию?

PS: вызов alert('blur') позволяет мне отслеживать, когда происходит пожар.

Answer 1

Вы можете использовать некоторые переменные говорят

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

Затем, нажав на текстовое поле устанавливается locks.textarea_lock = true; В обработчике изображений проверить этот замок:

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

В "смазанности" обработчик разблокировать переменную locks.textarea_lock = false;.