Knockout.js中的preventDefault（）`click` 3

Question

我在Knockout.js中有一個data-bind="click: ..."事件，並且每當元素中存在disabled類時，我都試圖將其disabled 。

<span class="disabled" data-bind="click: alerting">Two</span>

我正在嘗試不成功：

$('.disabled').click(function(e){
    e.preventDefault();
});

在線復制

我更喜歡使用類名來完成此操作，因為這樣我就可以處理元素的樣式以及網站中多個元素的交互。

Answer 1

這里的問題是，不能保證首先運行哪個單擊處理程序。 在這種情況下，敲除單擊綁定是在jquery處理程序之前執行的。

鑒於您正在使用剔除法，執行此操作的“正確”方法是讓ViewModel處理所有內容，而不要依賴外部內容（例如jQuery）來防止發生點擊。

在您的情況下，viewmodel可能如下所示：

var viewModel = {
    disabled: ko.observable(false),
    alerting: function(data, e) {
       if (!this.disabled())
           alert("two");
    }
};

然后，您只需更新disabled可觀察對象即可啟用/禁用點擊處理程序。 您也可以利用此觀察值對應禁用的元素應用不同的樣式，例如添加禁用的樣式，而不是使用該樣式來控制敲除行為。

Answer 2

我有幾種方法可以幫助您解決此要求。

我在這個工作示例中提供了一些選項供您查看： http : //plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview 。

我也在這里http://jsfiddle.net/8pa84cmu/1/分叉了您的JSFiddle

<p>Option 1 - Applying the disabled class, leave button clickable but check for class in click handler and do nothing</p>
<button class="disabled" data-bind="click: RegisterClick">Click</button>
<hr/>
<p>Option 2 - An enabled button doing what the click handler asks</p>
<button class="enabled" data-bind="click: RegisterClick">Click</button>
<hr/>
<p>Option 3 - A binding using a boolean to apply the class name if required and disabling it if required</p>
<button data-bind="click: RegisterClick, css: { disabled }, disable: disabled">Click</button>
<hr/>
<p>Option 4 - A binding just dealing with enabling / disabling</p>
<button data-bind="click: RegisterClick, enable: IsEnabled">Click</button>

var ViewModel = function() {
  this.RegisterClick = function(model, event) {
    if (event.target.className === "disabled") {
      return;
    }

    console.log("Clicked");
  }

  this.disabled = true;
  this.IsEnabled = false;
}

window.onload = function() {
  ko.applyBindings(new ViewModel());
}

Answer 3

您應該使用disabled attr禁用元素。 您可以使用以下方法處理視覺樣式：

a:disabled {
    color: red;
}

您也可以檢查敲除功能中的禁用類（不推薦，僅舉一個例子）。 像這樣http://jsfiddle.net/mCxjz/81/

Answer 4

這是您如何控制元素的樣式，並進行回調以考慮該樣式的方式。 如果您有20個元素想要一起設置樣式，則將對每個元素使用相同的可觀察值。 本示例制作三個可單擊的范圍，並在2.5秒后禁用它們。 您可以看到樣式更改。

 var viewModel = { isDisabled: ko.observable(false), alerting: function(data, event) { if ($(event.target).hasClass('disabled')) return; alert(event.target.innerHTML); } }; ko.applyBindings(viewModel); setTimeout(function () { viewModel.isDisabled(true); }, 2500); 

 .clickable { border-radius: 5px; padding: 5px; background-color: lightgreen; cursor: pointer; } .disabled { background-color: lightgray; cursor: not-allowed; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">One</span> <span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">Two</span> <span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}">Three</span> 

Answer 5

我更新了您的代碼以符合您的要求。 我從jQuery了解到的是，執行.click僅會將更多事件綁定到elem。 以下代碼的作用是覆蓋現有的單擊處理程序。

$._data($(elem)[0], 'events').click[0].handler = function() {return;}

如果您想找回舊功能，可以將其保存在var中，然后再重新分配。 希望這可以幫助。

http://jsfiddle.net/mCxjz/84/