jQuery stopPropagation()?

Question

Never come across this before can anyone give me any pointers?

I'm creating a web app for making notes like post it notes onto a whiteboard. At the moment the spawn button will spawn notes but I want to make it so that the user can click anywhere on the canvas (whiteboard) and it will spawn a new note at that position.

Here is the code for that: -

$("#canvas").bind('click', function(e){

// Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

$("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show();
    $("#note" + noteID).children(".title").text("Note " + noteID);
        $("#note" + noteID).css({left:x, top:y, "z-index" : zindex});

    noteID++;
    zindex++;

e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

});

The problem arises when the user clicks on one of the notes, because the notes are cloned into the canvas each time the user clicks on the note its creating another note. I want to stop this behaviour and ONLY create a note when a user clicks on a blank canvas area. I have tried preventDefauly, stopPropagation and stopImmediate... but none of them seem to have any influence.

I have also tried them on other actions such as the note click but just can't seem to get the right one in the right place? or am I going about this completely the wrong way?

example here:

http://www.kryptonite-dove.com/sandbox/animate

UPDATE:

$('#canvas').on('click', '.note', function(e) {
    e.stopPropagation();
});

This solved the problem of the notes bubbling up however it now prevents any click actions on the note class, I'm in uncharted waters here! would appreciate any pointers on how to get the click actions back working for the note title and text :)

Answer 1

If you want to do something on click on #canvas, but only if the click is directly on #canvas and not on its children, then the two main options available to you are:

1. As per your update you can handle the click on each child and stop it propagating up to the #canvas but of course that complicates other processing you might want to do for the children.

2. Test the event.target property to see if the DOM element that initiated the event is your #canvas element.

So, noting also that (unrelated to the problem at hand) you can and should chain jQuery methods rather than re-selecting the same element:

$("#canvas").bind('click', function(e){

   // if the clicked element wasn't #canvas return immediately
   if (e.target != this)
      return;

   // Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

   $("#note").clone().insertBefore("#insertAfter")
                     .attr("id", "note" + noteID)
                     .css({left:x, top:y, "z-index" : zindex})
                     .show()
                     .children(".title").text("Note " + noteID);

   noteID++;  
   zindex++;

   // You may not need any of the following any more (depending on
   // what your other requirements are)
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();

});

Here's a demo (with a much cut-down version of your JS, basically just the function from this answer and your styles): http://jsfiddle.net/H6XrW/

(Note that you don't ever need to call both of .stopImmediatePropagation() and .stopPropagation() since the former implicitly calls the latter for you.)