javascript - knockout.js 是否忽略禁用，或者 'allow' 单击禁用元素会发生什么？

Question

我正在开发一个使用 Jquery Mobile UI、knockout.js 组合的页面。如果 ViewModel 无效，则存在验证机制，该机制应该禁用 JQuery 移动分页。我已经检查过， knockout 机制工作正常，当模型状态从无效切换到有效时，它会删除手动添加的 disabled ="disabled" 属性。问题是我能够单击已禁用的分页控件(调用 knockout.js 单击绑定(bind) javascript 函数调用)。我什至向所有子控件添加了 disabled ="disabled"。
knockout.js 是否忽略了 disabled ="disabled"，还是有不同的解释？

Jquery移动导航控件的HTLM，可以在下面禁用时单击

<a data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="notext" data-inline="true" data-transition="none" data-bind="click: function() { onTheMove.loadPagingData(bcAccountProductAudit, 'GoToNextSet', true); }, enable : PageObj.isValid()" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" title="" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-btn-up-c" disabled="disabled">  
    <span class="ui-btn-inner ui-btn-corner-all" disabled="disabled">
        <span class="ui-btn-text" disabled="disabled"></span>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow" disabled="disabled">&nbsp;</span> 
    </span>
</a>

IsValid false 且控件已禁用

点击时内部的函数被调用

调用发起的堆栈跟踪

Answer 1

Knockout 不会自行检查某个元素是否被禁用 - click绑定(bind)只是监听浏览器对该元素的单击事件。

disabled不是全局属性，因此并非所有元素都支持它。如果您有 <button>带有 disabled 的元素属性集，并且您单击该按钮，浏览器不会生成 Knockout 可以监听的任何单击事件。 <a>标签不支持disabled但是，无论您是否设置该属性，浏览器都会生成单击事件。

解决此问题的最快方法是替换 <a>具有支持 disabled 的元素的元素属性(例如 <button> )，或手动检查该元素是否在您的点击处理程序中被禁用。请注意，虽然 knockout 正确删除了 disabled属性，当enable时将无法再次添加它对于不支持它的元素，条件将评估为 false - 例如 <a> - 所以你可能需要检查实际情况。