javascript - 为什么在 CSS 中将元素显示属性设置为 flex 会更改 'event.target' 的 JS onclick 事件的行为？

Question

我有一个基本列表，其 HTML 结构如下:

<ul class="list">
{...}
  <li class="item">Ellipse</li>
{...}

然后我用一些JS添加button s 删除元素，所以最终结构是这样的:

<ul class="list">
{...}
  <li class="item">Ellipse <button>Delete item</button></li>
{...}

我还有一个功能可以通过切换 CSS 类在单击时删除列表元素:

let ul = document.querySelector('.list');
{...}

function markAsDone (event) {  
  let target = event.target;
  target.classList.toggle('done');
}
{...}

ul.addEventListener('click', markAsDone);

这按预期工作(例如，列表项被删除)。但是，如果我在 CSS 中将列表项的显示属性更改为 flex:

.item {
  display: flex;
  justify-content: space-between;
  max-width: 300px ;
}

然后点击item，按钮的文字也被划掉了，不像以前!自从我开始写这篇文章以来，我不再知道哪种行为对我来说更“错误”，哈哈。

完整代码在 Codepen here .尝试单击列表中的元素，然后取消注释 .item 的 CSS 样式看看我的意思。

我没有受过教育的猜测是，这个问题的答案在于 flex 容器处理其中的元素的方式。不过，我对它的了解非常有限，所以特地来找你解答。

Answer 1

只需使用 span 包装您的文本将解决您的问题。检查下面的片段。

我不确定，但你申请 done上课至parent element它穿透了这两个元素。

let button = document.querySelector('.smash');
let input = document.querySelector('.userinput');
let ul = document.querySelector('.list');
let listItems = document.querySelectorAll('.list > li');

function inputLengthValue() {
  let result = input.value.length;
  return result;
}

function createListElem() {
  let li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  li.classList.add('item');
  ul.appendChild(li);
  input.value = "";

  let delButton = document.createElement('button');
  delButton.appendChild(document.createTextNode('Delete item'));
  li.appendChild(delButton);
  delButton.addEventListener('click', removeItem)
}

function addListItemOnclick() {
  if (inputLengthValue() != 0) {
    createListElem();
  }
}

function addListItemOnEnterPress(event) {
  if (inputLengthValue() != 0 && event.keyCode === 13) {
    createListElem();
  }
}

function createDeleteButtons() {
  for (let i = 0; i < listItems.length; i++) {
    let delButton = document.createElement('button');
    delButton.appendChild(document.createTextNode('Delete item'));
    listItems[i].appendChild(delButton);
    delButton.addEventListener('click', removeItem);
  }
}

function markAsDone(event) {
  let target = event.target;
  target.classList.toggle('done');
}

function removeItem(event) {
  let target = event.target;
  target.parentNode.remove();
}


button.addEventListener('click', addListItemOnclick);
input.addEventListener('keydown', addListItemOnEnterPress);
ul.addEventListener('click', markAsDone);
createDeleteButtons(); // create delete btn for default items

.done {
  text-decoration: line-through;
}

.item {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">Some list</h1>
<input type="text" placeholder="enter your text" class="userinput">
<button class="smash">Add item</button>
<ul class="list">
  <li class="item"><span>Romboid</span></li>
  <li class="item"><span>Square</span></li>
  <li class="item"><span>Circle</span></li>
  <li class="item"><span>Ellipse</span></li>
  <li class="item"><span>Rectangle</span></li>
  <li class="item"><span>Oval</span></li>
</ul>