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 :)

Solution 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.)

Solution 2

This code will stop clicks on the notes from creating new notes:

$("#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++;
});

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

It works by stopping any clicks on the notes from propagating up to the canvas div.

Solution 3

You will need to stop the propagation when clicking the notes, so that the #canvas element is not notified when one of its children is clicked (I am assuming that #insertAfter is a child of #canvas). Attach a click handler to each new note, that prevents the event from bubbling up:

$("#note" + noteID).click(function (e) {
    e.stopPropagation();
});

Comments

[KryptoniteDove]

have tried the above and with live but no joy, the notes are still bubbling, anymore ideas?

[KryptoniteDove]

This works to stop the propagation which is GREAT thankyou! :) however.. every other click action on the note is also now not working. Feel like its coming together but still something missing!

[jwueller]

If you are assuming that the note class exists, than you should probably say so. Otherwise, this approach is a more elegant version of my simplified example. +1!

[Richard Dalton]

@elusive I checked the example which contains the note class.

[KryptoniteDove]

Brilliant thank you!! great explanation, condensed code and JS fiddle got you the win :)