前端网页文本选中出现一个反馈按钮，鼠标点击之后可以进行文档反馈

最近有一个需求，就是增强文档的反馈能力，类似于腾讯云文档一样，如图：

当我们选中一些文本之后，会有一个 文档反馈的 tooltip 提示框，点击之后会有表单提交，不过这个文档技术比较牛的点就是，点击反馈提示框之后，还会自动截屏，存放图片，方便管理者查看。

参考文章

先放出参考文章吧，还是 css 世界作者大佬的，虽然时间是 2011 年，但是那会实现的到现在依旧还是可以的，如果大家能看懂的话，可以直接看参考文章即可。

js页面文字选中后分享到新浪微博实现

我的解决代码

以下仅个人使用代码，大部分情况能够通用，最终效果得根据具体业务来落地，仅供参考。

var selectContent = '';
let selectedText = '';
let isFirstClick = true;

// 以下部分是获取选中文本，为什么再加一个函数获取？

// 1.大佬代码是函数内的
// 2.大佬代码当我点击出现弹框的时候，txt 会变为 ''，获取不到选中文本了
document.onselectionchange = () => {
    const selection = document.getSelection();
    try {
        if (selection && selection.rangeCount > 0) {
            selectedText = selection.toString();
        } else {
            selectedText = '';
        }
    } catch (error) {
        console.log(error);
    }
};
document.addEventListener("mouseup", (e) => {
    if (selectedText.length > 0 && selectedText !== '' && isFirstClick) {
        selectContent = selectedText;
        isFirstClick = false;
    } else {
        selectedText = '';
        isFirstClick = true;
    }
});

// ----------- 分割线 ----------

var docsFeedBackFn = function (eleShare, eleContainer) {
    eleContainer = eleContainer || document;
    var funGetSelectTxt = function () {
        var txt = "";
        if (document.selection) {
            txt = document.selection.createRange().text; // IE
        } else {
            txt = document.getSelection();
        }
        return txt.toString();
    };
    eleContainer.onmouseup = function (e) {
        e = e || window.event;
        var txt = funGetSelectTxt(),
            sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
            top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
        // 这个是我个人需求所需，根据需要改变
        const asideMenuLeftDom = document.getElementById('asideMenuLeft');
        if (txt) {
            eleShare.style.display = "block";
            eleShare.style.position = 'absolute';
            // 这个增减宽度是我个人需求所需，根据需要改变
            eleShare.style.left = left - asideMenuLeftDom.clientWidth - 130 + "px";
            // 这个增减宽度是我个人需求所需，根据需要改变
            eleShare.style.top = top - 130 + "px";
        } else {
            eleShare.style.display = "none";
        }
    };
    eleShare.onclick = function () {
        // 个人需求所需，根据需要改变
        const $this = $(this);
        // xxx 点击之后弹窗
    };
};
// 执行函数
docsFeedBackFn(document.getElementById('一般是选中之后出现的反馈按钮 ID'), document.getElementsByClassName('需要就填某个 className 或者 id 啥的，不需要就不传')[0]);

学如逆水行舟，不进则退