JCrop api 'dragging-action' 触发提交事件

Question

在表单中使用 JCrop API 时，释放拖动操作时会触发提交事件。我无法弄清楚是什么导致了提交事件。当这是由 JCrop 引起时，有没有办法阻止表单提交 API?

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script  src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="ImageLoading.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
    /* Make JCrop API responsive, this will set the size of the JCop API to the size of the container */
    #preview {
        width: 100% !important;
        height: auto !important;
    }
    
    .jcrop-active {
        width: 100% !important;
        height: auto !important;
    }
</style>

</head>
<body>

<form class="form-horizontal" onsubmit="console.log('form submitted!')">
    <div class="form-group">
        <label for="inputFile" class="col-lg-2 control-label">File</label>
            <div class="col-lg-10">
                <input type="text" id="inputFile" readonly class="form-control floating-label" placeholder="Browse...">
                <input type="file" name="image_file" id="image_file" accept="image/jpeg, image/png" onchange="fileSelectHandler()" multiple>
                <div class="row">
                  <div id="previewContainer" class="col-sm-4">
                    <img class="img-responsive" id="preview"/>
                  </div>
                </div>
            </div>
            <div class="info">
                <input type="text" id="croppingXCo" name="croppingXCo" value=""/>
                <input type="text" id="croppingYCo" name="croppingYCo" value=""/>
                <input type="text" id="croppingSideLength" name="croppingSideLength" value=""/>
            </div>
        </div>
    </div>
</form>

</body>
</html>

Javascript:

// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api;
var scaleFactor;

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#croppingXCo').val(Math.floor(e.x*scaleFactor));
    $('#croppingYCo').val(Math.floor(e.y*scaleFactor));
    $('#croppingSideLength').val(Math.floor(e.w*scaleFactor));
    console.log(Math.floor(e.x*scaleFactor)) 
};

function fileSelectHandler() {
    // get selected file
    var imageFile = $("#image_file")[0].files[0];
    
    // preview element
    var image = $("#preview")[0];

    // prepare HTML5 FileReader
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
        
        
        // e.target.result contains the DataURL which we can use as a source of the image
        image.src = e.target.result;
        image.onload = function () { // onload event handler
            
            //if jcrop_api was already initialized on 
            if(jcrop_api != undefined) {
                jcrop_api.destroy();
                jcrop_api = null;
            }
            
            var croppingParameters = new Array(3); // [x, y, w]
            
            image.removeAttribute("style");
            var imageWidth = image.clientWidth;
            var imageHeight = image.clientHeight;
            var imageSelectBorder = 10;
            
            // initialize setSelect-croppingparameters
            if(imageWidth >= imageHeight) {
                croppingParameters[0] = (imageWidth - imageHeight)/2;
                if(croppingParameters[0] < imageSelectBorder) croppingParameters[0] = imageSelectBorder;
                croppingParameters[1] = imageSelectBorder;
                croppingParameters[2] = imageHeight - (2 * croppingParameters[1]);
            } else {
                croppingParameters[0] = imageSelectBorder;
                croppingParameters[1] = (imageHeight - imageWidth + (2 * imageSelectBorder))/2;
                if(croppingParameters[1] < imageSelectBorder) croppingParameters[1] = imageSelectBorder;
                croppingParameters[2] = imageWidth - (2 * croppingParameters[0]);
            }
            
            initJCrop(croppingParameters);
        }
    }
    
    // read selected file as DataURL
    fileReader.readAsDataURL(imageFile);
}

function initJCrop(croppingParameters) {
    
    var image = $("#preview")[0];   
    var minWidth = (image.clientWidth/image.naturalWidth) * 128
    
    scaleFactor = image.naturalWidth/image.clientWidth;
    console.log(scaleFactor);
    
    $('#preview').Jcrop({
        minSize: [minWidth, minWidth], // min crop size
        setSelect: [croppingParameters[0], croppingParameters[1], croppingParameters[2], croppingParameters[2]], // Set an initial selection area
        aspectRatio: 1, // keep aspect ratio 1:1
        bgFade: true, // use fade effect
        bgOpacity: .3, // fade opacity
        allowSelect: true,
        onSelect: updateInfo
    }, function(){
        // Store the Jcrop API in the jcrop_api variable
        jcrop_api = this;
      
    });
}

Answer 1

Jcrop 创建一个 Button 标签，在 HTML5 中所有的按钮都可以提交表单，因此通过取其 id 或 class 来更改此按钮的按钮类型，例如 $(".jcrop-box").attr('type', 'button')

JCrop api 'dragging-action' 触发提交事件

JCrop api 'dragging-action' triggers submit event

forms

jquery

submit

jcrop

jquery-events