防止孩子触发父母的点击事件不起作用答案

【问题标题】：Preventing Child from firing parent's click event doesnt work防止孩子触发父母的点击事件不起作用
【发布时间】：2022-07-13 23:28:50
【问题描述】：

用户写了一个待办事项，我将显示在一个div中，如果你点击div，文字将被删除，但如果你悬停将是一个带有垃圾桶图标的小div。我的问题是，每次我点击子元素时，父 div 的书写部分都会被删除。我怎样才能防止孩子像父母一样行事？我写 event.stopPropagation();但不起作用。

let text_field = document.getElementById("fname");
let count = 0;
text_field.addEventListener("keypress", function(event) {
  if(event.key === "Enter") {
    count++;
    console.log(count);
    event.preventDefault();
    let block_to_insert = document.createElement('div');
    block_to_insert.id = "div-created"+count+"";
    let text_to_insert = document.getElementById('fname').value;
    let text=block_to_insert.innerHTML = ''+text_field.value;
    block_to_insert.classList.add('todo-div-todo');
 
    let where_to_insert = document.getElementById('outer-div');
    where_to_insert.appendChild( block_to_insert );
    


    block_to_insert.onclick = function(e){
      block_to_insert.style.setProperty("text-decoration", "line-through");
    }
    
      block_to_insert.onmouseover = function(){
      let delete_div = document.createElement('div');
      let text=delete_div.innerHTML = '<i class="fa-solid fa-trash" style="color:white"></i>';
      delete_div.classList.add('delete-todo');
      delete_div.id = "delete-div"+count+"";

      let place_to_insert = document.getElementById(block_to_insert.id);
      place_to_insert.appendChild( delete_div );
      document.getElementById("delete-div"+count+"").addEventListener('click',function (event){
        event.stopPropagation();
        event.preventDefault();
     },true);
    }

    
  }
});

【问题讨论】：

e.stopPropagation()
@chovy 同样的问题...
用css代替js
@chovy 我认为我做不到，因为有两个事件，一个在父 div 中，一个在子 div 中。如果我制作 pointer-events:none ，我将阻止我想要的子事件
澄清一下，当您单击一个待办事项列表项时，所有这些都被删除了？

标签： javascript html css

【解决方案1】：

如果您按空格键或当焦点在按钮上时输入，（key-event，click） - 这两个事件都会被触发。
它只是浏览器的默认行为。

所以，建议两种方法。

- 检查是clickevent还是keyevent和event.detail

document.getElementById('testButton').addEventListener('click', e => {
  if (e.detail != 0) {
    document.getElementById('modal').focus();
  }
});

document.getElementById('modal').addEventListener('keyup', e => {
  console.log('Modal element triggered!');
});

document.getElementById('modal').addEventListener('focus', e => {
  console.log('focus!');
});

:focus {
    outline: 3px solid #3f3;
}

<div id="modal" tabindex="-1">Some content here</div>
<button id="testButton" >Focus on content</button>

- 只是防止事件发生。

document.getElementById('testButton').addEventListener('keydown', e => {
  e.preventDefault();
  
});

document.getElementById('testButton').addEventListener('keyup', e => {
  if (event.keyCode === 13) {
    e.preventDefault();
    e.stopPropagation();
    document.getElementById('testButton').click();  
  }
});

document.getElementById('testButton').addEventListener('click', e => {
  document.getElementById('modal').focus();
});

document.getElementById('modal').addEventListener('keyup', e => {
  console.log('Modal element triggered!');
});

document.getElementById('modal').addEventListener('focus', e => {
  console.log('focus!');
});

:focus {
    outline: 3px solid #3f3;
}

<div id="modal" tabindex="-1">Some content here</div>
<button id="testButton" >Focus on content</button>

【讨论】：