停止将鼠标单击事件传播到父div

Question

我有一个HTML结构，如：

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

</div>

“bg”div位于“screen”div之上（使用z-index属性来执行此操作），我想在单击“bg”div时在屏幕div中拖动图像。

我能够这样做，但问题是我收到错误：Uncaught RangeError: Maximum call stack size exceeded。

我相信它是由于来自“bg”的点击事件我使用触发器传递给“屏幕”。 我怎样才能阻止我在“bg”上再次向“屏幕”发出的事件。

为了说清楚，这是我的代码的JSFiddle：Click Here

Answer 1

我相信你已经解决了你的问题，因为你的jsFiddle现在正在工作，所以我要为其他人解释，所以我们可以将这个问题标记为已解决。
只需将div#screen移出div#bg即可防止事件冒泡的递归。

注意：为避免混淆，您不应在发布链接后更新链接内容。