javascript - jQuery Image load() 事件返回 false 不起作用？

Question

我编写了一个用于检查图像高度和宽度的函数。您可以在下面找到我的代码。它可以工作，但我有一个 return false 问题:它不起作用。

$("#published").click(function( event ){
    var img = $('<img src="'+selectedImage+'"/>').load(function( event  ){
                  var orgWidth = this.width;
                  var orgHeight = this.height;
                  console.log(orgWidth+" = "+orgHeight);

                  if(orgWidth >= 169 && orgHeight >= 169){
                    thisValidate.parent('div.rwmb-input').children('.imageError').remove();
                    return true;
                  }else{
                    event.preventDefault();
                    if(thisValidate.parent('div.rwmb-input').children('.imageError').length == 0){
                      thisValidate.parent('div.rwmb-input').append("<p class='imageError'></p>");
                    }
                    thisValidate.parent('div.rwmb-input').children('.imageError').html('<br/><label for="techranger_booked_feature_images" class="error">Upload Image More then 169 x 169</label>');
                    return false;
                  }
              });

});

我添加了 event.preventDefault(); 但它也没有帮助。

Answer 1

您将返回到 load() 函数，该函数不会返回到外部点击函数。

此外，load() 是异步的，因此点击事件将在 load() 之前完成。

最后，您有 2 个 event 参数，load 中的参数不会对点击产生任何影响

您需要完全阻止点击，并在 load() 成功时手动触发下一个事件。

$("#published").click(function( event ){
     event.preventDefault();// prevent default
    // no access to "this" inside load() so store reference to form
    var $form = $(this).closest('form');

    var img = $('<img src="'+selectedImage+'"/>').load(function(imgEvt ){
           // code removed for clarity
          if(orgWidth >= 169 && orgHeight >= 169){
               /* trigger form submit */
               $form.submit();
          }else{
             // other code
          }
    });
});