Нажмите на ссылку под div, который также имеет событие clickable

Question

У меня есть div, в котором есть событие, реагирующее на клики. В этом случае это просто console.log, ниже div у меня есть a href, и мне бы хотелось, чтобы, когда пользователь нажимает на div, а не на a href, отображается console.log, но если пользователь при нажатии a href открывается ссылка вместо отображения console.log.

Возможно ли это?

$('.top-item').on( "click", function() {
  console.log("div clicked");
});

.top-item {
  width: 100px;
  height: 50px;
  position: absolute;
  left:0;
  top:0;
  background-color: rgba(255,0,0,.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-item">
</div>

<a href="#">Click me</a>

Поэтому, когда нажимается top-item, отображается console.log, когда нажимается a href, несмотря на то, что он находится под top-item, открывается ссылка вместо console.log.

Есть идеи? Спасибо.

Answer 1

https://jsfiddle.net/6b5sf4xc/1/

Тогда вы должны рассчитать по координатам, как в примере ниже. Вы рассчитываете координаты, затем нажимаете размещенные координаты, затем сравниваете

$('.top-item').on( "click", function(e) {
    var coor=$("a").position();
  checkCoordinate(coor.left,coor.left+$("a").width(),coor.top,coor.top+$("a").height(),e.pageX,e.pageY);

});

function checkCoordinate(x1,x2,y1,y2,clickx,clicky){
    if(clickx>=x1 && clickx<=x2 && clicky<=y2 && clicky>=y1){
   console.log("a clicked");
  }
    else{
   console.log("div clicked");
  }
}