Как мне сделать ссылки внутри моего управляемого 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'; 
}); 

Вы заметите, что, когда вы удерживаете нажмите на подсказке, она исчезает, и поэтому вы нажимаете на «ничего». Если вы прокомментируете эту часть, это сработает.