Как повесить на блок ссылку, которая не перекроет работу ссылок и обработчиков на внутренних блоках?
Есть блок div внутри секции link в котором есть своя внутренняя ссылка ya.ru и обработчики событий на внутренних span. В свою очередь, на внешнем блоке также зашита в атрибуте своя ссылка на google.com.
Как сделать так, чтобы по всему блоку секции link работала своя ссылка, а по внутреннему блоку своя и выполнялись все обработчики?
Т.е. на блоке div должны отрабатывать обработчики plus, minus и ссылка с ya.ru, а на свободной области внешней секции link, куда не входит блок div, по клику должна отработать ссылка google.com.
На текущий момент при клике на внутреннем блоке всегда срабатывает внешняя ссылка, хочу это поправить, но e.stopPropagation() не отрабатывает так, как я этого ожидал изначально.
var link = document.getElementById('link');
var div = document.getElementById('div');
link.addEventListener('click', function(e) {
datalink = this.getAttribute("data-link");
if (typeof(datalink) != 'undefined' && datalink != null) {
window.location.href = link;
}
});
div.addEventListener('mouseenter', function(e) {
console.log("mouseenter");
e.stopPropagation();
if (link) {
link.style.pointerEvents = "none";
}
});
div.addEventListener('mouseleave', function(e) {
console.log("mouseleave");
e.stopPropagation();
if (link) {
link.style.pointerEvents = "initial";
}
});
document.getElementById('plus').addEventListener('click', function(e) {
console.log("plus");
});
document.getElementById('minus').addEventListener('click', function(e) {
console.log("minus");
});#link {
background: green;
width: 100%;
height: 50px;
position: relative;
z-index: 1;
cursor: pointer;
}
#div {
width: 50%;
background: red;
position: relative;
z-index: 2;
}<section id="link" data-link="https://google.com/">
<div id="div">
<span id="plus">+</span>
<span id="minus">-</span>
<a href="https://ya.ru/">Link</a>
</div>
</section>