Запретить запуск события размытия, если какой-либо из его дочерних элементов получает фокус. ⇐ Jquery

[Гость]

У меня есть элемент div на странице, который показывает некоторую информацию об определенной категории (Изображение, Имя и т. д.).

Когда я нажимаю на изображение редактирования, категория переводится в режим редактирования, что позволяет мне обновить имя. Как вы можете видеть на изображении ниже, видно, что «Суп» в данный момент находится в режиме редактирования, а остальные — в обычном режиме просмотра. Все работает так, как и ожидалось: кнопки Отмена / Сохранить делают все правильно. (Я пытался добавить изображение, но оно мне не позволило, и оно требует больше внимания.)

Однако, находясь в режиме редактирования, если я щелкну где-нибудь еще на странице (за пределами div), ожидаемым результатом будет то, что категория супа вернется в режим просмотра. При срабатывании какого-либо события это также должно позволить мне спросить, хотят ли они сохранить изменения.

Поэтому я решил создать событие размытия в родительском div "супов". Это работает так, как и ожидалось, если я нажму в любом месте страницы. Однако, если я нажму на внутренний элемент div, это также приведет к запуску родительского события размытия, в результате чего категория вернется в режим просмотра.

Итак, есть ли способ запретить родительскому элементу div вызывать событие размытия, если какой-либо из его дочерних элементов получает фокус?

Я только что написал код без компилятора, поэтому не уверен, что он вообще работает, но надеюсь, вы поняли суть.

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