如何防止contenteditable div内的绝对定位图片被误删？

方法一：给图片添加contenteditable="false"属性 #

直接在img标签中设置该属性，让图片脱离可编辑范围，双击或输入时不会被选中删除，这是最简单有效的方案：

<div contenteditable="true" class="tag">
  <img src="delete.svg" class="deleteIcon" contenteditable="false">
</div>

方法二：CSS设置图片不可选中（配合方法一使用更佳） #

给图片添加不可选中的样式，阻止鼠标选中图片，避免误操作。注意单独使用时无法阻止键盘删除，建议和contenteditable="false"搭配：

.deleteIcon {
  user-select: none;
  -webkit-user-select: none; /* 兼容Chrome、Safari等webkit内核浏览器 */
}

方法三：监听编辑事件阻止删除（备选复杂方案） #

如果前两种方法不满足需求，可以通过JS监听键盘事件，检测删除操作并阻止误删图片：

const tagDiv = document.querySelector('.tag');
tagDiv.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace' || e.key === 'Delete') {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    
    const range = selection.getRangeAt(0);
    // 判断选中区域是否包含目标图片
    const targetImg = range.commonAncestorContainer.closest('.deleteIcon') 
      || range.commonAncestorContainer.querySelector('.deleteIcon');
    
    if (targetImg) {
      e.preventDefault();
    }
  }
});

内容的提问来源于stack exchange，提问作者JavaForAndroid