jquery - JCrop + 防止点击传播

Question

我正在使用 jcrop 并将其附加到最后

我还有一个点击事件附加到第一个 div id="photoCropContainer"

    <div id="photoCropContainer">
      <div id="croppingControls">
        <div id="croppingBackgroundContainer">
          <img src="../../images/cropping-default.jpg" id="croppingBackgroundDefault" alt="Pre Cropping Background Default">
        </div>
      </div>

      <div id="cropBoxWrapper"><img src="../../images/cropping-default.jpg" id="cropBox" alt="Photo Crop Box"/></div>
    </div>

*此配置的原因是允许用户在未加载 jcrop 时单击主 div，以及在加载 jcrop 时显示的内容，以便他们可以上传和裁剪不同的图像。

我遇到的唯一问题是当有人使用 Jcrop 时，它会触发第一个 div id="photoCropContainer"。

有没有办法阻止从 id="cropBox" 传播到 id="photoCropContainer" 的点击事件？

谢谢

Answer 1

通常，您可以通过将 stopPropagation 事件添加到单击来停止传播，如下所示：

$("#clickyclicky").on('click', function(event){
      event.stopPropagation(); //this should stop the click from propagating.
      //do other stuff here                      
});