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

Question

我有一个 HTML 结构，如：

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

</div>

“bg”div 位于“屏幕”div 上方（使用 z-index 属性这样做），当我单击“bg”div 时，我想在屏幕 div 中拖动图像。

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

我相信这是由于我使用触发器传递给“屏幕”的“bg”的点击事件。 如何阻止我传递给“屏幕”的事件在“bg”上再次触发。

为了清楚起见，这里是我的代码的 JSFiddle：点击这里

Answer 1

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

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