Javascript 我有contenteditable div，其中有一个不可编辑的跨度，如何标记div'；在跨度文本上长时间单击s文本

我有contenteditable div，它里面有一个不可编辑的span，我应该怎么做才能通过从span文本开始的长时间摆动单击来选择div的文本，并在我想要选择的文本处停止？ 我只想选择div内的文本，而不想选择不可编辑范围内的文本

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
跨度{
颜色：浅灰色；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：100%；
}

一些可编辑的文本
其他一些不可编辑的文本

CSS

• 删除可编辑内容的焦点轮廓outer

  div

• 用元素包围可编辑零件
• 使用

  contentEditable='true'

  在外部div中对焦时，仅在可编辑区域上显示对焦轮廓

JS

• 我将长按设置为1秒（可调）
• 您将有一项激动人心的任务，只允许长时间单击元素
• 要测试它，请单击外部div上的任意位置（

  #banner message

  ），您应该只看到文本的可编辑部分

[contenteditable='true']：焦点{
大纲：无；
}
[contenteditable='true'].可编辑{
显示：内联块；
}
[contenteditable='true']：焦点。可编辑{
轮廓：1px点灰色；
}

Gif

在

gif

的开头，我单击了内容的不可编辑部分，但什么也没发生。然后，在

gif

的末尾，我长按外部的

div

，显示所选文本在正确的位置工作

演示：

var-pressTimer；
var bannerMessage=document.getElementById（“横幅消息”）；
var editableRegion=bannerMessage.querySelector（“[contenteditable='true'].editable”）；
函数handleMouseUp（）{
清除超时（按定时器）；
返回false；
}
函数handleMouseDown（）{
pressTimer=window.setTimeout（函数（）{
if（document.body.createTextRange）{
const range=document.body.createTextRange（）；
range.moveToElementText（可编辑区域）；
range.select（）；
}else if（window.getSelection）{
var selection=window.getSelection（）；
var range=document.createRange（）；
范围。选择节点内容（可编辑区域）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}, 1000);
返回false；
}
bannerMessage.addEventListener（“鼠标”，handleMouseUp）；
bannerMessage.addEventListener（“mousedown”，handleMouseDown）
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
跨度{
颜色：浅灰色；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：100%；
大纲：无；
}
[contenteditable='true']：焦点{
大纲：无；
}
[contenteditable='true'].可编辑{
显示：内联块；
}
[contenteditable='true']：焦点。可编辑{
轮廓：1px点灰色；
}

一些可编辑的文本
其他一些不可编辑的文本
我已经更新了我的问题，但非常感谢！很抱歉我没有解释…@adirabargil听到这个消息太好了。很抱歉，我真的不明白你想要什么。我得到的程序是，当我的鼠标从不可编辑的范围开始向下移动时，无法选择可编辑文本。。。我只希望它是选中的事件，如果我鼠标向下时，我是在不可编辑和正常的功能