Conflict between click events

Question

Hi guys, I have a bad time trying to resolve the conflict between the two onclick events. My project has an area with canvas and properties.

I can add elements (button click) to the canvas by adding them to It (These elements have a class of ".element" and they are div, and the canvas is also a div element).

So, as soon as I have an element on the canvas, I can see its properties (in the properties window) by clicking on it. To handle this click event, I executed the following function:

var canvas = $('#canvas');

 $(function(){
    canvas.delegate('.element','click', function(){
    // Here I update the properties box with information of the clicked element
    // and and some css to the element so user can know that It selected
    });
 });

Now I want to implement a function that, when I click elsewhere on the canvas, clears the properties field (if the item is not selected). I tried to do this:

$(function(){
  canvas.on('click',function(){
         //Clear properties box here
  });
});

But now it cancels the first function (it is similar only to the second). Do you guys know how I can make a difference?

Answer 1

#stopPropagation

canvas.on('click', '.element', function(e){
  // all your code here
  e.stopPropagation();
});

, .element div, , .element , ( ). stopPropagation div, .
, ( ), #delegate .