Блог

Существует элемент по имени класса разблокировки и по событию щелчка, внутренний текст которого будет изменен другим значком svg. он хорошо работает и заменен новым значком svg.

 <div class="Panel card" id="leftSidebarForm">
        <div class="Panel card-subtitle">
            <div class="column">
                <div class="unlock">
                    <svg>1</svg>
                </div>
                <div class="Panel">
                    <svg>1</svg>
                </div>
                <div class="unchain">
                    <svg>2</svg>
                </div>
                <div class="Panel">
                    <svg>3</svg>
                </div>
            </div>
        </div>
    </div>
 

Но я определяю EventListener » вкл document .», чтобы закрыть указанный выше элемент при нажатии снаружи.

 document.addEventListener("click", function (event) {
    
    if (document.getElementById('leftSidebarForm') != null amp;amp;
        !event.target.closest('#leftSidebarForm')  amp;amp;
        !event.target.closest('#left-sidebar-menu')
    ) {

      // do something

    }
});
 

Проблема возникает при нажатии на svg 1, чтобы изменить значок, он закрывается leftSidebarForm , пока он является его родителем и не должен закрываться leftSidebarForm .
Нажав на значок svg, чтобы изменить его содержимое, этот фрагмент кода вернет null

 event.target.closest('#leftSidebarForm')
 

Я думаю, это потому, что, изменив innerHTML элемент, мы удаляем его из dom и event.target.closest('#leftSidebarForm') возвращаем значение null, потому что этого svg не существует.

Как я могу решить эту проблему ?