preventDefault()在Knockout.js 3中的“单击”
preventDefault()在Knockout.js 3中的“单击”
提问于 2015-12-17 15:28:31
我在Knockout.js中有一个Knockout.js事件，每当元素中存在disabled类时，我就尝试禁用它。
<span class="disabled" data-bind="click: alerting">Two</span>我正在尝试，但没有成功：
$('.disabled').click(function(e){
e.preventDefault();
});在线复制
我更喜欢使用类名，因为这样我就可以同时处理元素的样式和站点中多个元素的交互。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-12-17 15:36:26
这里的问题是，无法保证哪个单击处理程序将首先运行。在本例中，敲除单击绑定在jquery处理程序之前执行。
考虑到您正在使用淘汰赛，这样做的“适当”方法是让视图模型处理所有事情，而不是依赖于外部的东西，比如jQuery，以防止单击发生。
在您的示例中，视图模型可能如下所示：
var viewModel = {
disabled: ko.observable(false),
alerting: function(data, e) {
if (!this.disabled())
alert("two");
}
};然后，只需更新可观察到的disabled，以启用/禁用单击处理程序。您也可以利用这种可观察到的方式，将不同的样式应用于应该禁用的元素，例如添加禁用的样式，而不是使用样式来控制淘汰行为。
Stack Overflow用户
发布于 2015-12-17 15:50:52
我有几种办法可以让你处理这个要求。
我在这个工作示例中提供了几个选项，供您查看：http://plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview。
我还用叉子叉了你的JSFiddle这里，http://jsfiddle.net/8pa84cmu/1/
<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());
}Stack Overflow用户
发布于 2015-12-17 15:40:30
您应该使用disabled attr禁用元素。您可以使用以下方法处理可视样式：
a:disabled {
color: red;
}您也可以检查淘汰赛函数中的禁用类(不推荐，只是一个例子)。像这样的http://jsfiddle.net/mCxjz/81/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34338255
复制相关文章
相似问题
腾讯云开发者
