划词选择文本添加右键菜单的实现方式

要在划词选择的文本上添加右键菜单，你可以通过以下步骤实现：

1. 监听文本选择事件

首先，你需要监听用户选择文本的事件。可以使用 mouseup 事件来检测用户是否选择了文本。

document.addEventListener('mouseup', function(event) {
    const selectedText = window.getSelection().toString();
    if (selectedText.length > 0) {
        // 用户选择了文本
        showContextMenu(event, selectedText);
    }
});

2. 显示自定义右键菜单

当检测到用户选择了文本后，你可以显示一个自定义的右键菜单。这个菜单可以通过创建一个 div 元素来实现。

function showContextMenu(event, selectedText) {
    // 防止默认的右键菜单出现
    event.preventDefault();

    // 创建菜单元素
    const contextMenu = document.createElement('div');
    contextMenu.style.position = 'absolute';
    contextMenu.style.left = `${event.pageX}px`;
    contextMenu.style.top = `${event.pageY}px`;
    contextMenu.style.backgroundColor = '#fff';
    contextMenu.style.border = '1px solid #ccc';
    contextMenu.style.padding = '5px';
    contextMenu.style.boxShadow = '2px 2px 5px rgba(0,0,0,0.2)';
    contextMenu.innerHTML = `
        <ul style="list-style: none; margin: 0; padding: 0;">
            <li><a href="#" data-action="copy">复制</a></li>
            <li><a href="#" data-action="highlight">高亮</a></li>
            <li><a href="#" data-action="search">搜索</a></li>
        </ul>
    `;

    // 将菜单添加到页面中
    document.body.appendChild(contextMenu);

    // 监听菜单项的点击事件
    contextMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            handleContextMenuAction(e.target.getAttribute('data-action'), selectedText);
            contextMenu.remove(); // 移除菜单
        });
    });

    // 点击页面其他地方时移除菜单
    document.addEventListener('click', function() {
        contextMenu.remove();
    }, { once: true });
}

3. 处理菜单项的操作

根据用户点击的菜单项，执行相应的操作。例如，复制文本、高亮文本或进行搜索。

function handleContextMenuAction(action, selectedText) {
    switch (action) {
        case 'copy':
            navigator.clipboard.writeText(selectedText).then(() => {
                console.log('文本已复制到剪贴板');
            });
            break;
        case 'highlight':
            // 高亮选中的文本
            const range = window.getSelection().getRangeAt(0);
            const span = document.createElement('span');
            span.style.backgroundColor = 'yellow';
            range.surroundContents(span);
            break;
        case 'search':
            // 在新标签页中搜索选中的文本
            window.open(`https://www.google.com/search?q=${encodeURIComponent(selectedText)}`, '_blank');
            break;
        default:
            console.log('未知操作');
    }
}

4. 样式和用户体验优化

为了提升用户体验，你可以为右键菜单添加一些样式，并确保菜单在页面滚动时也能正确显示。

/* 添加一些基本样式 */
div.context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

div.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.context-menu ul li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
}

div.context-menu ul li a:hover {
    background-color: #f0f0f0;
}

5. 处理页面滚动

如果页面可以滚动，你需要确保右键菜单在滚动时也能正确显示。可以通过监听 scroll 事件来调整菜单的位置。

window.addEventListener('scroll', function() {
    const contextMenu = document.querySelector('.context-menu');
    if (contextMenu) {
        contextMenu.remove();
    }
});

总结

通过以上步骤，你可以在用户划词选择的文本上添加一个自定义的右键菜单，并根据用户的选择执行相应的操作。这种方法可以增强用户体验，并为用户提供更多的操作选项。