Вы можете остановить навигацию с помощью preventDefault и остановить переход к ссылке с помощью stopPropagation .
В следующей демонстрации при нажатии на img не всплывает вверх по DOM. Щелчок по div за пределами img пузырей до A, как и нажатие на текст A.
function showStuff(event) {
// Stop default action, e.g. following a link
event.preventDefault();
// Stop click from bubbling, e.g. to link parent
event.stopPropagation();
// Just for demonstration purposes, delete when no longer required
console.log('Click from ' + event.target.tagName +
' reached ' + event.currentTarget.tagName);
}
window.onload = function() {
// This listener is for demo only and prevents following the link
// Don't add it if you want to follow the link for clicks outside the img
let link = document.querySelector('a');
link.addEventListener('click', showStuff, false);
// This listener stops clicks from the img reaching the A and
// stops navigation from clicks on the img
let img = document.querySelector('img');
img.addEventListener('click', showStuff, false);
}
.card {
width: 250px;
height: 350;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
margin: 30px;
cursor: pointer;
border: 1px solid green;
}
.middle {
margin: 20px;
border: 1px solid blue;
}
img {
height: 50px;
width: 50px;
margin: 20px;
border: 1px solid red;
cursor: default;
}
<div class="card">
<a href="http://www.google.com/search?q={{m.Name}}" target="_blank">Some link text
<div class="middle">
<div class="img-container"><img src="foo.jpg"></div>
</div>
Some more link text
</a>
</div>