blocks|key|2150621|text|这里的问题是，无法保证哪个单击处理程序将首先运行。在本例中，敲除单击绑定在jquery处理程序之前执行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2150622|考虑到您正在使用淘汰赛，这样做的“适当”方法是让视图模型处理所有事情，而不是依赖于外部的东西，比如jQuery，以防止单击发生。|2150623|在您的示例中，视图模型可能如下所示：|2150624|var+viewModel+=+{
++++disabled:+ko.observable(false),
++++alerting:+function(data,+e)+{
+++++++if+(!this.disabled())
+++++++++++alert("two");
++++}
};|code-block|syntax|javascript|2150625|然后，只需更新可观察到的disabled，以启用/禁用单击处理程序。您也可以利用这种可观察到的方式，将不同的样式应用于应该禁用的元素，例如添加禁用的样式，而不是使用样式来控制淘汰行为。|offset|length|style|CODE|2150626|entityMap^0|0|0|0|0|C|8|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>The issue here is that there's no guarantee as to which click handler is going to run first.  In this case, the knockout click binding is executing before the jquery handler.</p>

<p>Given that you're working with knockout, the "proper" way to do this would be for the viewmodel to handle everything, and not rely on something external, such as jQuery, to prevent the click from happening.</p>

<p>In your case, the viewmodel might look like this:</p>

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

<p>You then just update the <code>disabled</code> observable to enable/disable the click handler.  You could also make use of this observable to apply different styling to elements that should be disabled, eg adding the disabled style, rather than using the style to control the knockout behaviour.</p>


blocks|key|2150663|text|您应该使用disabled+attr禁用元素。您可以使用以下方法处理可视样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2150664|a:disabled+{
++++color:+red;
}|code-block|syntax|javascript|2150665|您也可以检查淘汰赛函数中的禁用类(不推荐，只是一个例子)。像这样的http://jsfiddle.net/mCxjz/81/|2150666|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mCxjz/81/^0|5|8|0|0|X|T|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You should use <code>disabled</code> attr to disable the element. You can deal with visual styling using this:</p>

<pre><code>a:disabled {
    color: red;
}
</code></pre>

<p>You can also, check the disable class inside knockout's function (not recommend, just an example). Like this <a href="http://jsfiddle.net/mCxjz/81/" rel="nofollow">http://jsfiddle.net/mCxjz/81/</a></p>


blocks|key|2707938|text|我更新了您的代码以满足您的要求。我从jQuery中了解到，执行.click只会将更多的事件绑定到elem。下面的代码将重写退出的单击处理程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2707939|$._data($(elem)[0],+'events').click[0].handler+=+function()+{return;}|code-block|syntax|javascript|2707940|如果您想要返回旧函数，可能会将其保存在var中，并在稍后重新分配。希望这能有所帮助。|2707941|http://jsfiddle.net/mCxjz/84/|2707942|entityMap|0|LINK|mutability|MUTABLE|url^0|V|6|0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

<p>I updated to your code to fit your requirements. What I understand from jQuery is that executing <code>.click</code> only binds more events to the elem. What the following code does is it overrides the exiting click handler. </p>

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

<p>Should you want to get back your old function, probably save it in a var and reassign it later. Hope this helps.</p>

<p><a href="http://jsfiddle.net/mCxjz/84/" rel="nofollow">http://jsfiddle.net/mCxjz/84/</a></p>


blocks|key|2707951|text|我有几种办法可以让你处理这个要求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2707952|我在这个工作示例中提供了几个选项，供您查看：http://plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview。|offset|length|2707953|我还用叉子叉了你的JSFiddle这里，http://jsfiddle.net/8pa84cmu/1/|2707954|<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>|code-block|syntax|javascript|2707955|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());
}|2707956|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview|1|http://jsfiddle.net/8pa84cmu/1/^0|0|M|1F|0|0|K|V|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>There's a few ways I could think of for you to deal with this requirement.</p>

<p>I've put a few options in this working example for you to look at: <a href="http://plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview" rel="nofollow">http://plnkr.co/edit/t1jG3JmsywxteRyNNKS4?p=preview</a>. </p>

<p>I've also forked your JSFiddle here <a href="http://jsfiddle.net/8pa84cmu/1/" rel="nofollow">http://jsfiddle.net/8pa84cmu/1/</a></p>

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

<pre class="lang-js prettyprint-override"><code>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());
}
</code></pre>


blocks|key|1549213|text|下面是如何控制元素的样式，并让回调将该样式考虑在内。如果您有20个元素想要共同设计样式，那么您将对每个元素使用相同的可观察性。这个例子使三个可点击的跨度，并在2.5秒后禁用他们。你可以看到造型的变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549214|​|1549215|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);|code-block|syntax|javascript|1549216|.clickable+{
++border-radius:+5px;
++padding:+5px;
++background-color:+lightgreen;
++cursor:+pointer;
}
.disabled+{
++background-color:+lightgray;
++cursor:+not-allowed;
}|1549217|<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>|1549218|1549219|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here is how you would control styling of an element, and have a callback take that styling into account. If you had 20 elements that you wanted to style together, you would use the same observable for each of them. This example makes three clickable spans, and disables them after 2.5 seconds. You can see the styling change.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.clickable {
  border-radius: 5px;
  padding: 5px;
  background-color: lightgreen;
  cursor: pointer;
}
.disabled {
  background-color: lightgray;
  cursor: not-allowed;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
&lt;span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}"&gt;One&lt;/span&gt;
&lt;span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}"&gt;Two&lt;/span&gt;
&lt;span class="clickable" data-bind="click: alerting, disabled: isDisabled, css: {disabled: isDisabled}"&gt;Three&lt;/span&gt;</code></pre>
</div>
</div>
</p>


<p>I have a <code>data-bind="click: ..."</code> event in Knockout.js and I'm trying to disable it whenever a <code>disabled</code> class is presence in the element. </p>

<pre><code>&lt;span class="disabled" data-bind="click: alerting"&gt;Two&lt;/span&gt;
</code></pre>

<p>I'm trying this without success:</p>

<pre><code>$('.disabled').click(function(e){
    e.preventDefault();
});
</code></pre>

<p><a href="http://jsfiddle.net/mCxjz/76/" rel="nofollow">Reproduction online</a></p>

<p>I prefer to do it by using a classname as this way I can handle both the styling of the element and the interaction with it for multiple elements in the site.</p>


preventDefault() `click` in Knockout.js 3

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在Knockout.js中有一个Knockout.js事件，每当元素中存在disabled类时，我就尝试禁用它。<span class="disabled" data-bind="click: alerting">Two</span>我正在尝试，但没有成功：$('.disabled').click(function(...

问preventDefault()在Knockout.js 3中的“单击”
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问preventDefault()在Knockout.js 3中的“单击”EN