Not responding to events?

Question

I currently have three Divs and only one of them is in focus at a given time. All of them line up in a film strip fashion. When I click a DIV not in focus, the current one moves to the left or right (depending on the direction) and the new one comes into focus.

The divs can have content that has links. So my problem is that upon clicking on the divs not in focus, if I happen to click on a link, the event is captured. Is there anyway I can disable event detection for divs not in focus?

What I am looking for is something like:

if(div not in focus)
 disable all links
if (div comes into focus)
 enable all links

Answer 1

Assuming that the active <div> has a class of Active, you can do it like this:

$('.Container div:not(.Active) a').live('click', function(e) {
    return false;
});

Answer 2

In your event handler, use

if (event.target.tagName == "a") // where `event` is the 1st argument passed 
    event.preventDefault();      // to the handler

This will prevent the default action if a link was clicked and still allow the div to move into focus.

Answer 3

Sounds like a selector problem. Can't you give those divs unique ids or classes to bind click events individually?