JQuery stopPropagation ()?

Question

Never come across this before, can anyone give me any directions?

I am creating a web application for creating notes, like notes on a blackboard. At the moment, the spawn button will create notes, but I want to make it so that the user can click anywhere on the canvas (board), and a new note will appear in this place.

Here is the code for this: -

$("#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 occurs when the user clicks on one of the notes, because the notes are cloned into the canvas every time the user clicks on the note, creating another note. I want to stop this behavior and ONLY create a note when the user clicks on an empty canvas area. I tried preventDefauly, stopPropagation and stopImmediate ... but none of them seem to have any effect.

I also tried them for other actions, such as clicking on a note, but just can't seem right in the right place? or am I going about this completely wrong?

an example here:

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

UPDATE:

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

This solved the bubble problem, but now it prevents any click action on the notes class, I'm here in uncharted waters! would be grateful for any pointers on how to return the click action working on the title and text of the note :)

Answer 1

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

• According to your update, you can handle the click on each child and stop its distribution to #canvas, but of course, this complicates the other processing that you might want to do for children.

• Check the event.target property to see if the DOM element that raised this event is your #canvas.

Thus, noting also that (not related to the problem) you can and should use 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 version (with a heavily-cut version of your JS, basically just a function from this answer and your styles): http://jsfiddle.net/H6XrW/

(Note that you never need to call both .stopImmediatePropagation() and .stopPropagation() , as the former implicitly calls the latter for you.)

Answer 2

This code will stop clicking notes to create 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 notes from distribution to div canvas.

Answer 3

You need to stop the spread when clicking on notes so that the #canvas element #canvas not notified when one of its children is clicked (I assume that #insertAfter is a child of #canvas ). Attach a click handler to each new note that prevents a bubble event:

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

Answer 4

I'm a bit of a jquery noob, so there might be an easier way to do this, but I tested the following and it works for me. I would be interested to hear from others if I could do anything better. I did not touch HTML or CSS.

 // ----------------- BRING TO FRONT ------------------- $(".note").live("click", function (e) { console.log("Note click"); $(this).css({"z-index" : zindex}); //Increment zindex zindex++; indexPos = $(this).css("zIndex"); // Get current z-index value e.stopPropagation(); }); // ----------------- CLONE NOTE ELEMENT ------------------- $(document).on("click", "#canvas, .clone", function(e){ var left; var top; if ($(this).hasClass("clone")) { // If the button fired the click put the note at the top of the viewport console.log("Button click"); left = 0 + noteOffset; top = 50 + noteOffset; noteOffset = noteOffset + 15; } else { // If the canvas fired the click put the note on the current mouse position console.log("Canvas click"); left = e.pageX + "px"; top = e.pageY + "px"; } $("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show() .children(".title").text("Note " + noteID).end().css({ left: left, top: top, "z-index": zindex }); noteID++; zindex++; }); // ----------------- REMOVE NOTE ELEMENT ------------------- $(".close").live("click", function (e) { console.log("Close click"); $(this).parent().remove(); e.stopPropagation(); }); 

Answer 5

If you place a call to stopEventPropagation inside the canvas, you are preventing the click event from propagating to CANVAS PARENTS only. A click "moves" from an internal element to the DOM.

Here is a link to an example:

http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html