Making area clickable unless overlapped with another element?

Making area clickable unless overlapped with another element?

Hi, I'm new to jQuery and I'm struggling with making an area clickable which is not covered by another element.

In my script, I use:

  1. $(".blueBox").click(function() {
      $('.somethingElse', this).slideToggle("fast", function() {});
    });

When a blue box is clicked, I toggle something else. However, I have an overlapping box on the blue box (called .redBox) which, when clicked, executes the same function. What I'd like to do is NOT run the click function when the red box is clicked.


What's the best way to approach this?

Thanks!

Bren