jQuery click event for document but ignore a div

Question

I have a online Slide Show I'm working on using jQuery. I have use $(document).click event to detect when a user clicks on the page to know when to show the next bullet point in the slide or to move to the next page.

The problem I'm running into is my job had me insert a comment box on the bottom of the page and when ever someone clicks on the comment box or the save comment button it also fires the click event for the page.

Is there a way I can have the click event for the entire page but ignore it when someone clicks in the DIV the Comment box/Save button are in?

Answer 1

You will most likely need to stop the propgation of events in your Comments div using the event object's stopPropagation() method:

$('#comments').click(function(e) {
  e.stopPropagation();
});

if that doesn't work try using preventDefault():

e.preventDefault();

Answer 2

Set up your click handler, then unbind it from the elements that you don't want bound. Then set up a new click handler on those elements that stops event handling.

 $(document).click( function() { ... } );
 $('#commentBox').unbind('click').click( function(e) {
     e.stopPropogation();
 } );
 $('#saveButton').unbind('click').click( function(e) {
     e.stopPropogation();
 } );