div下方的链接也具有可点击事件

由 发布于

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;
  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>

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.

有任何想法吗？谢谢。