Wie mache ich Links in meinem Javascript-div zu arbeiten?

Question

Ich habe einen Tooltip diesen Code aus Jsfiddle mit: 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'; 
}); 

Alles funktioniert gut, aber ich die HTML-Links auf den Tooltip bemerkt nicht mehr arbeiten.

Ich denke, das MouseUp-Ereignis betrifft die Links, aber ich bin mir nicht sicher.

Was die Links von der Arbeit verhindert und wie kann ich es beheben

Answer 1

, dass wegen des mousedown- Ereignisses, das den Tooltip verbirgt. Wenn Sie diese Zeilen sehen auf:

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

Sie werden feststellen, dass, wenn Sie den Klick halten Sie auf den Tooltip, verschwindet es und deshalb klicken Sie auf „nichts“. Wenn Sie diesen Teil kommentieren, wird es funktionieren.