javascript - 如何使 Javascript 控制的 div 内的链接正常工作？

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';
});

您会注意到，当您按住工具提示上的单击时，它会消失，因此您单击的是“无”。如果您注释掉该部分，它就会起作用。