为何无法比较e.target和htmlelement？

Question

我正在尝试使用下拉菜单，并且我正在考虑为下拉菜单创建模板，以便我可以轻松地重新创建它们而无需任何其他Javascript。但是，在我的一个if循环中，一个event.target和另一个元素总是返回它们彼此不同时的区别。这没有任何意义，因为它们是相同的元素（由控制台验证），并且应该返回true。这是代码：

const _$$ = (q) => document.getElementsByClassName(q);
let dropdowns = _$$('dropdown');
if (dropdowns[0]) {
  for (let dropdown of dropdowns) {
    let title = dropdown.children[0],
      options;
    title.setAttribute('tabindex', 0);
    title.addEventListener('focus', function() {
      options = Array.from(dropdown.children).slice(1, dropdown.children.length);
      for (let option of options) {
        option.style.display = 'block';
        option.setAttribute('tabindex', options.indexOf(option) + 1);
        option.style.top = `${title.offsetHeight+options.indexOf(option)*title.offsetHeight}px`;
        option.style.padding = window.getComputedStyle(title, null).getPropertyValue('padding');
      }
      document.addEventListener('click', function(e) {
        console.log(e.target);
        console.log(title);
        if (e.target !== dropdown || e.target !== title) {
          for (let option of options) {
            if (e.target !== option) {
              option.style.display = 'none';
            }
          }
        }
      }, false);
    }, false);
  }
}

.dropdown-title {
  padding: 5px 8px;
  color: blue;
  background: white;
  width: fit-content;
}

.dropdown {
  display: flex;
  flex-direction: column;
}

.dropdown:hover {
  cursor: pointer;
}

.dropdown-title {
  outline: none;
}

.dropdown-option {
  display: none;
  position: absolute;
  user-select: none;
}

<div class="dropdown --top-dropdown">
  <div class="dropdown-title" tabindex="0">Dropdown</div>
  <div class="dropdown-option" tabindex="1" style="display: none; top: 31px; padding: 5px 8px;">Dropdown Option</div>
  <div class="dropdown-option" tabindex="2" style="display: none; top: 62px; padding: 5px 8px;">Dropdown Option</div>
</div>

如您所见，e.target和option是相同的元素。但是，在if循环中，它说if (e.target !== dropdown || e.target !== option) {...}时总是说它们是不同的元素，并删除了下拉选项。

Answer 1

条件e.target !== dropdown || e.target !== title应更改为e.target !== dropdown && e.target !== title。原因是当e.target等于title时，它不一定等于dropdown，反之亦然（当e.target为dropdown且条件为或（||）时，表达式为总是true。

const _$$ = (q) => document.getElementsByClassName(q);
let dropdowns = _$$('dropdown');
if (dropdowns[0]) {
  for (let dropdown of dropdowns) {
    let title = dropdown.children[0],
      options;
    title.setAttribute('tabindex', 0);
    title.addEventListener('focus', function() {
      options = Array.from(dropdown.children).slice(1, dropdown.children.length);
      for (let option of options) {
        option.style.display = 'block';
        option.setAttribute('tabindex', options.indexOf(option) + 1);
        option.style.top = `${title.offsetHeight+options.indexOf(option)*title.offsetHeight}px`;
        option.style.padding = window.getComputedStyle(title, null).getPropertyValue('padding');
      }
      document.addEventListener('click', function(e) {
        if (e.target !== dropdown && e.target !== title) {
          for (let option of options) {
            if (e.target !== option) {
              option.style.display = 'none';
            }
          }
        }
      }, false);
    }, false);
  }
}

.dropdown-title {
  padding: 5px 8px;
  color: blue;
  background: white;
  width: fit-content;
}

.dropdown {
  display: flex;
  flex-direction: column;
}

.dropdown:hover {
  cursor: pointer;
}

.dropdown-title {
  outline: none;
}

.dropdown-option {
  display: none;
  position: absolute;
  user-select: none;
}

<div class="dropdown --top-dropdown">
  <div class="dropdown-title" tabindex="0">Dropdown</div>
  <div class="dropdown-option" tabindex="1" style="display: none; top: 31px; padding: 5px 8px;">Dropdown Option</div>
  <div class="dropdown-option" tabindex="2" style="display: none; top: 62px; padding: 5px 8px;">Dropdown Option</div>
</div>