javascript - 按钮上的单击事件禁用所需 html 的默认行为

Question

<input name="color" type="radio" data-bind="style: { backgroundImage : 'url('+$parents[1].generateSwatchImage($data)+')'}, checked: $parent.selectedOption, checkedValue: $data ,click : $parents[1].onSelectSwatchAddSlick" required />

<select name="size" required aria-required="true" id = "CC-prodDetails-sku-alphaProduct_size" data-bind="validatableTarget: selectedOption, validationOptions: {decorateElement: false, decorateElementOnModified:  false}, options: optionValues, optionsText: 'key',
                                optionsCaption: $data.optionCaption, value: $data.selectedOption, disable: $parent.disableOptions() || $data.disable, optionsAfterRender: function(option, item) { ko.applyBindingsToNode(option, {disable: !item}, item); },onRender : $parent.AlphaSelector(), event : {change : $parents[1].onSelectDropdownOptionAddSlick}">
                        </select>  

handleAddToCart: function() {
        notifier.clearError(this.WIDGET_ID);
        var variantOptions = this.variantOptionsArray();
        notifier.clearSuccess(this.WIDGET_ID);
        //get the selected options, if all the options are selected.
        var selectedOptions = this.getSelectedSkuOptions(variantOptions);

        var selectedOptionsObj = { 'selectedOptions': selectedOptions };
        
        //adding availabilityDate for product object to show in the edit summary 
        //dropdown for backorder and preorder
        var availabilityDateObj = { 'availabilityDate': this.availabilityDate()};
        var stockStateObj = { 'stockState': this.stockState()};
        

        var newProduct = $.extend(true, {}, this.product().product, selectedOptionsObj, 
                                        availabilityDateObj, stockStateObj);
        
        if(this.selectedSku() && ! this.selectedSku().primaryThumbImageURL){
          this.assignSkuIMage(newProduct, this.selectedSku());
        }
        if (this.variantOptionsArray().length > 0) {
          //assign only the selected sku as child skus
          newProduct.childSKUs = [this.selectedSku()];
        }
        
        newProduct.orderQuantity = parseInt(this.itemQuantity(), 10);
        var itemQuantityInCart = this.itemQuantityInCart(newProduct);
        var stockAvailable = newProduct.orderLimit&&newProduct.orderLimit<this.stockAvailable()?newProduct.orderLimit:this.stockAvailable();
        if ((itemQuantityInCart + parseInt(this.itemQuantity(), 10)) > stockAvailable) {
          var notificationMsg = CCi18n.t('ns.productdetails:resources.totalItemQuantityExceeded', {stockAvailable: stockAvailable, itemQuantityInCart: itemQuantityInCart});
          notifier.sendError(this.WIDGET_ID, notificationMsg, true);
          return;
        }

        $.Topic(pubsub.topicNames.CART_ADD).publishWith(
          newProduct,[{message:"success"}]);

        // To disable Add to cart button for three seconds when it is clicked and enabling again
        this.isAddToCartClicked(true);
        var self = this;
        setTimeout(enableAddToCartButton, 3000);

        function enableAddToCartButton() {
          self.isAddToCartClicked(false);
        };

        if (self.isInDialog()){
          $(".modal").modal("hide");
        }
      },

我在 html 标签(如 input 和 select)中使用 required，但问题是 required 的默认弹出框验证似乎不起作用如果我使用按钮上的点击事件，并且如果我删除该事件，则要求开始按预期工作

有人可以帮忙吗？

 <div  id="CC-prodDetails-addToCart" data-bind="inTabFlow:(validateAddToCart())" >
                <button type = "submit" class="btn primary full-width cart" data-bind="click: handleAddToCart" >
                
                </button>
            </div>

Answer 1

基本点击事件上返回true是关键

jsClick = function () {
  console.log('jsClicked');
  return true;
};

function MyViewModel() {
  var self = this;
  
  self.koClick = function () {
    console.log('koClicked');
  };
};

ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button onClick="jsClick()" data-bind="click: koClick">click</button>