Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery stopPropagation()?

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

like image 288
KryptoniteDove Avatar asked Mar 23 '12 22:03

KryptoniteDove


People also ask

What is stopPropagation in JS?

The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.

What's the difference between event preventDefault () and event stopPropagation ()?

stopPropagation prevents further propagation of the current event in the capturing and bubbling phases. preventDefault prevents the default action the browser makes on that event.

What does event stopPropagation () do chegg?

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

What is e preventDefault () in jquery?

preventDefault() method stops the default action of an element from happening. For example: Prevent a submit button from submitting a form. Prevent a link from following the URL.


2 Answers

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

like image 97
nnnnnn Avatar answered Oct 30 '22 08:10

nnnnnn


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.

like image 22
Richard Dalton Avatar answered Oct 30 '22 08:10

Richard Dalton