Search code examples
jqueryhtmljcrop

JCrop + Prevent Click Propagation

I'm using jcrop and attaching it to the last

I also have a click event attached to the first div with 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>

* The reason for this configuration is to allow a user to click the main div when jcrop isn't loaded and what is showing of this when jcrop is loaded so they can upload and crop a different image.

The only issue I have is when someone uses Jcrop it triggers the first div id="photoCropContainer".

Is there a way I can stop click events propagating from id="cropBox" to id="photoCropContainer"?

thx

Solution

  • Usually you can stop propagation by adding the the stopPropagation event to the click like this:

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