JCrop + 防止点击传播

Posted 2023-02-25

【中文标题】JCrop + 防止点击传播

【英文标题】：JCrop + Prevent Click Propagation

【发布时间】：2012-09-18 07:14:46

【问题描述】：

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

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

    <div id="photoCropContainer">
      <div id="croppingControls">
        <div id="croppingBackgroundContainer">
          <img src="../../images/cropping-default.jpg" id="croppingBackgroundDefault" >
        </div>
      </div>

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

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

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

有什么方法可以阻止点击事件从 id="cropBox" 传播到 id="photoCropContainer"？

谢谢

【参考方案1】：

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

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

【讨论】：

注意“事件”一词的位置。它在函数一词附近的 () 大括号中定义，然后在函数体中调用。