Whole DIV clickable except while hovering a span

Question

Hi, 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.

Answer 2

You could the event target:

$(".myBox").click(function(e){
    if (e.target.nodeName.toUpperCase() !== 'SPAN') {
        window.location=$(this).find("a").attr("href");
        return false;
    }
 });

However, as Nick points out in the comments, this assumes that there will be no non-span children of the span. Since you are inserting a tooltip, Nick's solution is (inevitably) the better way to go.

Answer 3

I guess my question would be, does the span need to be a child of the div? I would put the span before or after the div tag, set its position to relative or absolute, then push it into the div tag. Like so:

<span style="position:relative;top:-20px;left:-20px">Icon</span>
<div> Do your div stuff here </div>

This should work. You might need to include a z-index of 1 or 2 for the span, but I doubt this. What this will do is put the div in behind, and the span in front; now the span won't react to your click handler. Hope this works!