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 时将图像拖动到 screen div 中。

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

我相信这是由于我使用触发器从“bg”传递到“screen”的点击事件。我怎样才能阻止传递给“screen”的事件在“bg”上再次触发。

为了清楚起见，这是我的代码的 JSFiddle:Click Here

Answer 1

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

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