Исключить jQuery из спецификации c Div с использованием CSS

Question

Сайт использует это js, которое разбивает поля ввода поисковой формы, добавленные в div для брендинга сайта

/**
 * Remove all off-canvas states
 */
 function removeAllFocusStates() {
    'use strict';

    var siteBranding = document.getElementsByClassName('site-branding')[0];
    var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
    var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
    var i;
    var o;

    for (i = 0; i < getFocusedElements.length; i++) {
        getFocusedElements[i].blur();
    }

    for (o = 0; o < getFocusedClassElements.length; o++) {
        deleteClass(getFocusedClassElements[o], 'is-focused');
    }
}

Вот вывод HTML для контейнера для брендинга сайта

<div class="site-branding">
    <form role="search" method="get" class="search-form" action="http://dev.local/">
        <label>
            <span class="screen-reader-text">Search for:</span>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" />
        </label>
        <input type="submit" class="search-submit" value="Search" />
    </form>        
</div>

Обновление : вот используемая removeAllFocusStates () функция, которую необходимо изменить, чтобы исключить форму поиска

  ...
  document.addEventListener('click', function(event) {

      // Remove all focused menu states when clicking outside site branding
      if (event.target !== document.getElementsByClassName('site-branding')[0]) {
          removeAllFocusStates();
      } else {
          // nothing
      }

  }, false);
}

Пользователи не могут вводить текст в поле ввода поиска, поскольку js изменяет поле ввода по умолчанию.

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

Иначе, есть ли способ изменить js, чтобы он не влиял на форму поиска?

Я сделал поиск похожих вопросов, однако не смог найти ничего, что относится конкретно к этой проблеме.

Answer 1

CSS решение не может быть предпочтительным в этом случае. Причина в том, что event.target возвращает выбранный элемент (поле ввода) вместо родителя. Поэтому event.target !== document.getElementsByClassName('site-branding')[0] не вернет true, когда вы щелкнете по полю ввода внутри .site-branding.

. Я предлагаю добавить EventListener к элементу .site-branding и посмотреть, есть ли у элемента, к которому щелкнули, родительский элемент .search-form.

document.getElementsByClassName('site-branding')[0].addEventListener('click', function(event) {

  // Value of event.target would be the input field but not the parent.
  // So if you want to exclude element inside a specific parent,
  // try to select the target's parent.

  if (event.target.closest('.search-form') === null){ 
    removeAllFocusStates();
  } else {

  }
}, false);

Answer 2

Старайтесь не звонить removeAllFocusStates(), когда пользователь нажимает на ввод.

То есть

if (event.target !== document.getElementsByClassName('site-branding')[0]) {

становится чем-то вроде

if ( (event.target !== document.getElementsByClassName('site-branding')[0]) && (event.target !== document.getElementsByClassName('search-field')[0]) ) {