如何不修改HTML实现点击<a>元素时正常修改用户文本选区？

现有代码只在click事件的捕获阶段执行了e.preventDefault()，仅能拦截<a>标签点击后的默认跳转行为，但浏览器对<a>这类可导航交互元素的选区重置操作发生在更早的mousedown事件阶段：
点击<a>时，浏览器会在mousedown阶段默认折叠当前文本选区、初始化链接拖拽流程、将焦点转移到<a>元素，这一系列操作会直接清空、重置现有文本选区，导致后续的选区扩展逻辑失效。
而<div>属于非交互元素，点击时浏览器不会在mousedown阶段主动修改选区，因此定时器控制的选区修改逻辑可以正常运行。

在原有代码基础上新增mousedown事件的捕获阶段监听，在mousedown阶段就执行preventDefault()，提前拦截浏览器对选区的默认重置操作即可，修改后的完整JavaScript代码如下：

document.addEventListener('click', click, true)
// 新增mousedown捕获阶段监听，拦截早于click触发的选区重置行为
document.addEventListener('mousedown', click, true)

function click(e) {
  e.preventDefault()
}

setInterval(() => {
  const selection = window.getSelection();
  selection.modify('extend', 'forward', "documentboundary");
}, 100);

• 该方案不会改变原有功能逻辑，仅阻止点击<a>时默认触发的选区折叠、链接拖拽、焦点抢占等会打断选区操作的行为，让<a>的点击表现和<div>一致，选区扩展逻辑可正常生效。
• 原有HTML代码不需要做任何修改。

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