是 knockout.js 忽略了禁用，还是“允许”<a> 点击禁用的元素？

Question

我正在处理一个使用 Jquery Mobile UI、knockout.js 组合的页面。如果 ViewModel 无效，则存在应该禁用 JQuery 移动分页的验证机制。我已经检查并且淘汰机制工作正常，当模型从无效状态切换到有效状态时，它正在删除手动添加的 disabled ="disabled" 属性。问题是我能够单击禁用的分页控件（调用 knockout.js 单击绑定 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 绑定只是侦听浏览器对该元素的点击事件。

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

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