选中文本时无需额外点击自动弹出菜单的实现方案有哪些

以下是几种常用的可实现方案：

1. 原生JavaScript实现（无第三方依赖） #

不需要引入任何外部资源，适配性最高，可完全自定义交互逻辑：

• 核心逻辑是监听mouseup（鼠标选中释放触发）、selectionchange（选中文本内容变化触发）两个事件，覆盖鼠标拖拽选中、快捷键选中等所有文本选中场景
• 选中文本后通过window.getSelection()获取选中内容，判断如果内容长度大于0，则通过getBoundingClientRect()拿到选中区域的边界坐标，把预设的菜单DOM定位到选中区域附近显示
• 额外监听菜单外点击事件、取消选中文本的事件，触发后自动隐藏菜单

适配你提供的页面的完整可运行示例代码如下（原英文段落已翻译为中文）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选中文本弹菜单示例</title>
    <style>
        #textMenu {
            display: none;
            position: absolute;
            background: #fff;
            border: 1px solid #eee;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            padding: 6px 10px;
            border-radius: 4px;
            z-index: 9999;
        }
        #textMenu button {
            margin: 0 4px;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 2px;
            background: #f8f8f8;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- 自定义选中菜单 -->
<div id="textMenu">
    <button>复制</button>
    <button>搜索</button>
    <button>高亮</button>
</div>
<!-- 原英文内容翻译后的文本 -->
<p>17到18世纪，英国议会颁布了一系列名为《航海条例》的法律，管辖英国与其海外殖民地之间的贸易。比如1600年和1603年的《航海条例》禁止殖民地商人将糖、烟草等商品出口到英国以外的任何地区，同时禁止他们使用非英国船只进口货物。与此类似，1733年的《糖蜜法案》规定，所有进入北美大陆殖民地的外国糖蜜（从甘蔗中提取的浓稠液体，用于酿造朗姆酒）每加仑征税6便士。该法案的主要目的并非增加财政收入，而是作为保护性关税，牺牲法国竞争对手的利益，惠及英属西印度群岛的食糖生产商。到1750年，一系列《航海条例》已全面实施，对北美殖民地经济产生了多方面影响。</p>

<script>
const menu = document.getElementById('textMenu')
// 监听选中文本触发事件
document.addEventListener('mouseup', handleSelect)
document.addEventListener('selectionchange', handleSelect)
// 点击菜单外区域隐藏菜单
document.addEventListener('click', (e) => {
    if(!menu.contains(e.target)) menu.style.display = 'none'
})

function handleSelect() {
    const selection = window.getSelection()
    const selectText = selection.toString().trim()
    // 未选中有效内容直接隐藏菜单
    if(!selectText) {
        menu.style.display = 'none'
        return
    }
    // 计算选中区域坐标，定位菜单
    const range = selection.getRangeAt(0)
    const rect = range.getBoundingClientRect()
    menu.style.left = `${rect.left + window.scrollX + rect.width/2 - menu.offsetWidth/2}px`
    menu.style.top = `${rect.top + window.scrollY - menu.offsetHeight - 6}px`
    menu.style.display = 'block'
}
</script>
</body>
</html>

2. 第三方封装库实现 #

如果不需要深度自定义逻辑，可以直接用成熟的开源封装库快速实现，常见可选库包括：tippy.js配合选中逻辑、medium-editor、text-selection-menu等，这类库已经封装好了坐标计算、边界适配、多端兼容等能力，只需要配置菜单项和点击回调即可。

注意事项 #

• 要兼容移动端的话，需要额外监听touchend事件，适配移动端文本选中的交互逻辑
• 如果要屏蔽浏览器默认的选中文本右键菜单，可以监听contextmenu事件阻止默认行为
• 选中区域靠近页面边缘时，需要额外做菜单的边界适配，避免菜单超出视口无法显示

你期望实现的效果参考如下：

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