stopPropagation() not stopping event bubbling?

Question

jsFiddle

I'm using a jQuery plugin that allows the user to draw boxes in an area. I've put a dropdown list in the box that appears when the users lets go of the mouse button. The problem is, when you try to click on the dropdown list to select an option, another box is drawn. I've tried to use the following code to stop the click event bubbling (this is near the bottom of the javascript file in the jsFiddle), but it doesn't work:

$('.dropdown').click( function(e) {
    e.stopPropagation();
    return true;
});

What am I doing wrong? Thanks for reading.

Answer 1

A workaround is to check what is the target when mouse drag start. Something like this,

if (event.target.tagName.toLowerCase() != 'div' ) { return; }

or, in all events that happened.

OP's demo, updated