Question

I am using a script by CSS-Tricks, which is pretty straightforward except my scenario includes a little tricky area 🙂

The script:

$(".myBox").click(function(){
   window.location=$(this).find("a").attr("href");
   return false;
});

This works perfectly except inside my DIV I have a span containing an icon that needs to trigger a tooltip but not link anywhere (already working fine).

My question:
Is it possible for the above script to make the whole DIV clickable EXCEPT while hovering a child span?

Thank you!

Answer 1

In your tooltip code you can stop the click from bubbling up using event.stopPropagation(), like this:

$(".myBox span").click(function(e){
  e.stopPropagation();
  //show tooltip
});

This stops the click event from going to the parent .myBox <div> from that tooltip <span>, meaning that your current .click() handler won’t fire/redirect the page.