Stop propagation of mouse click event to parent div

Question

I have a HTML structure like:

<div class="container">
    <div id="bg">   
        <img src="#"/>
        <div id="screen">
         <img src="#" id="draggable"/>
        </div>
    </div>   

</div>

The "bg" div is above the "screen" div (used z-index property to do so), i want to drag the image in screen div when i click on the "bg" div.

I am able to do so, but the issue is i am getting the error: Uncaught RangeError: Maximum call stack size exceeded .

I believe its due to the click event from "bg" i pass to "screen" using trigger. How can i stop the event i passed to "screen" from firing again on "bg".

To make it clear, here is the JSFiddle of my code: Click Here

Answer 1

I believe you already solved your problem as your jsFiddle is working now, so I am gonna explain for others, so we can mark this question as solved.
Just move your div#screen out of div#bg to prevent the recursion of event bubbling.

NOTE: To prevent confusion you should not update the contents of your link after you publish it.