按鈕上的click事件禁用了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標簽（例如輸入和選擇）中使用了必填項，但問題是默認彈出窗口是否需要對必填項進行驗證，如果我使用按鈕上的click on事件，並且如果我刪除了該事件，則require會按預期開始工作

有人可以幫忙嗎??

  <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

在基本點擊事件上return 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> 

Answer 2

我想我已經解決了這個問題，我在表單標記上添加了數據綁定提交並在那里調用了函數，因此功能和html所需的行為都可以正常工作<form id="PDP_Form" data-bind = "submit : $data.handleAddToCart">

為什么不只是在提交按鈕上放置點擊處理程序？

標題

您可以使用單擊提交按鈕來代替在表單上使用提交。 但是，submit的優勢在於它還捕獲了提交表單的其他方法，例如在文本框中鍵入內容時按Enter鍵。

**

參數

**

• 主要參數

您要綁定到元素的Submit事件的函數。

您可以引用任何JavaScript函數-它不一定是視圖模型中的函數。 您可以通過編寫Submit來引用任何對象上的函數：someObject.someFunction。

視圖模型上的函數有些特殊，因為您可以按名稱引用它們，即，您可以編寫submit：doSomething，而不必編寫submit：viewModel.doSomething（盡管從技術上講這也是有效的）。

• 附加參數

無注釋有關如何在調用視圖模型上不存在的函數時將其他參數傳遞給提交處理函數或如何控制此句柄的信息，請參見與單擊綁定有關的注釋。 該頁面上的所有注釋也適用於提交處理程序。