检测点击 contenteditable div 中的文本答案

【问题标题】：Detect click on text in contenteditable div检测点击 contenteditable div 中的文本
【发布时间】：2022-02-12 02:14:33
【问题描述】：

我想在点击实际文本时允许编辑文本。拖动功能所需的其余空白区域。

有什么方法可以检测鼠标点击文本而不是 contenteditable div 中的空白的时间？

是否有一些我可以添加到 div 中的 CSS 来环绕文本而不是空格？或者是否有一些 Javascript 可以判断用户何时单击文本。

      <div class="container">
        <div class="textbox" contenteditable="true"></div>
      </div>

            .container{
              min-width: 100px;
              width: min-content;
              height: min-content;
              padding: 10px;
              border: 1px solid black;
            }
            
            .textbox{
              min-width: 100px;
              width: min-content;
            }

【问题讨论】：

标签： javascript html css

【解决方案1】：

一种解决方案是将每个文本插入<p> 标记中。 <p> 将在整个容器中扩展。在<p> 中，我会将文本的每一部分都包装在<span> 标记中。所以当用户点击文本时，事件的目标就是 span 元素，当用户点击空白时，事件的目标就是 p 元素。

document.querySelector(".container").addEventListener("click", function(e){
  if(e.target.localName == "p") {
    //whitespace
  }
  if(e.target.localName == "span") {
    //text
 }
});

【讨论】：

【解决方案2】：

我认为您无法检查是否有人点击了元素的空白区域。

最好的方法是创建 div 作为文本框的边框，并使用 javascript 检查用户是否点击了边框。

document.getElementById("drag-border").addEventListener("click",function(event){
  //This if blocks calling rest of function when user clicks on textbox and not on border
  if (event.currentTarget !== event.target) {
    return;
  }
  console.log( "Clicked on border" );
});

.container{
  min-width: 100px;
  width: min-content;
  height: min-content;
}
    
.textbox{
  min-width: 100px;
  width: min-content;
  border: 1px solid black;
  background: white;
}

#drag-border{
  background: red;
  padding: 10px;
  border: 1px solid black;
}

<div class="container">
  <div id="drag-border">
    <div class="textbox" contenteditable="true"></div>
  </div>
</div>

【讨论】：