与淘汰赛条件
问题描述:
禁用悬停我有一个按钮,看起来像这样:与淘汰赛条件
<button data-bind="enable: valid, css:{'btn-primary': valid() === true}">
我想禁用与相同条件valid() === true
。实质上,我想添加pointer-events: none
当我的功能等于true
使用敲除绑定。
答
您的标题显示“禁用悬停”,但问题(从之前的PO评论中淡化)提及想要添加一个pointer-events
css值。我会假定后者是最后的指示。
按照@ SivanrajM的评论,最合理的方法是启用/禁用类。例如:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid,
'no-ptr-evts': valid }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>
这我不清楚你为什么会想(根据您的问题)时valid() === true
禁用指针的事件,但嘿:这就是你了!
请注意,我已将valid() === true
减少到valid
,这相当于。
顺便说一句,如果你想跳过创建一个单独的班级,做的内嵌样式淘汰赛类比,用the style
binding:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid },
style: { 'pointer-events': valid() ? 'none' : 'auto' }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>
+0
非常感谢您的帮助,不仅仅是因为您帮助我编写代码指南。我试图这样做,因为这是禁用按钮的条件,但当悬停在禁用按钮中处于活动状态时,用户会感到困惑。 – UserEsp
你最后一句不作对我来说很有意义,特别是在问题标题的背景下(提到“悬停”而你的问题没有)。也许是语言问题?请澄清你的文章,向我们展示一个小的repro,包括你迄今为止所尝试和研究的内容。 – Jeroen
完全的语言问题,英语不是我的主要语言。关于我的问题,我想添加“指针事件:无”,当我的功能与“真”使用敲除绑定相等。 – UserEsp
你可以创建一个新类.pointerevent {pointer-events:none; }你可以添加这个类与你现有的条件css:{'btn-primary pointerevent':valid()=== true} –