如何在a元素的点击事件中获取选中的文本内容？

根因说明 #

点击<a>元素时，浏览器会执行默认交互逻辑，提前清除页面已有的文本选中状态，等到onclick事件触发时，getSelection()已经拿不到之前选中的内容了。<button>元素没有这类会清除选中状态的默认行为，所以可以正常获取结果。

修复方案 #

方案一：改用mousedown事件触发（推荐） #

mousedown的触发时机早于浏览器清除选中状态的动作，不会影响a标签原有的跳转逻辑，适合需要保留a标签跳转能力的场景：

function GetSelectedText(){
    console.log(getSelection().toString());
}

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, nam!</p>
<!-- 把onclick替换为onmousedown -->
<a role="button" id="a" onmousedown="GetSelectedText()">a element</a>
<button type="button" id="button" onclick="GetSelectedText()">Button</button>

方案二：阻止a标签默认行为 #

如果a标签仅作为按钮使用，不需要跳转功能，可以在click事件里阻止默认行为，避免选中状态被清除：

function GetSelectedText(e){
    // 阻止a标签默认行为
    e?.preventDefault();
    console.log(getSelection().toString());
}

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, nam!</p>
<!-- 传入event参数 -->
<a role="button" id="a" onclick="GetSelectedText(event)">a element</a>
<button type="button" id="button" onclick="GetSelectedText()">Button</button>

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