javascript - 停止将鼠标单击事件传播到父 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：单击此处

Answer 1

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

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