Question

我使用来自Jsfiddle的代码创建了一个工具提示：https://jsfiddle.net/joktrpkz/7/

var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});
window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

一切正常但我注意到工具提示上的html链接不再有效。

我认为mouseup事件正在影响链接，但我不确定。

什么阻止链接工作以及如何解决？

Answer 1

这是因为隐藏了工具提示的mousedown事件。如果你看这一行：

window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

您会注意到，当您按住工具提示上的单击时，它会消失，因此您点击“无”。如果你注释掉那个部分，那就行了。

如何在我的Javascript控制div中创建链接？

1 个答案: