I have a div that has a clickable event. In this case it's just a console.log, below the div I have an a href and I would like that when the user clicks on the div and not the a href it shows the console.log, but if the user clicks on the a href it opens the link instead of showing the console.log.


$('.top-item').on( "click", function() {
  console.log("div clicked");
.top-item {
  width: 100px;
  height: 50px;
  position: absolute;
  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">

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

So when top-item is clicked show console.log, when a href is clicked despite being under top-item open the link instead of console.log.