html - 点击发生在错误的元素上

Question

我正在使用 flex 盒子 justify-content设置为自动在标题栏上的元素之间放置空间。它真的很好用。但是，现在，我已经开始尝试扩展搜索栏(即，当用户关注它时它会变宽)。这不是网站的关键部分，所以我可以很容易地放弃它。然而，在四处游玩时，我注意到单击按钮时会发生奇怪的行为。

如果您运行下面的 fiddle，您会看到当您点击按钮时没有首先选择浏览器认为您点击了父 div 的输入。但是，如果您再次点击，您将点击实际的按钮。

谁能解释为什么会这样？

此外，也许是由于 CSS 转换，但它的存在使 div 向右而不是向左增长(当 justify-content 设置为 flex-end 时会发生这种情况。

$(document).on("click", function(e) {
  alert('you clicked on ' + $(e.target).prop("tagName") + '.' + $(e.target).attr("class"));

});

.header-search {
  width: 4rem;
}

ul>li {
  display: inline-block;
  padding-left: 1rem;
  list-style-type: none;
}

.header-search:focus {
  width: 7rem;
}

.header-search-bar:focus-within {
  margin-left: -3rem;
  transform: translateX(3rem);
}

.container {
  margin-top: 25px;
  width: 75%;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.right {
  justify-content: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    LEFT CONTENT

  </div>
  <div class="right">

    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li class="header-search-bar">

        <div class="parentDIV">
          <input type="search" class="header-search" placeholder="Search..." name="q" value="">
          <button type="submit" class="submitBTN" id="searchSubmit">SUBMIT
  </button>
        </div>


      </li>
    </ul>

  </div>
</div>

Answer 1

正如 Rowan Baker-French 在评论中正确指出的那样，这是 Prevent firing focus event when click on div. 的副本

解决方法是:

$(document).on("mousedown", function(e) {
  e.preventDefault();
  alert('you clicked on ' + $(e.target).prop("tagName") + '.' + $(e.target).attr("class"));
});