KnockoutJS绑定的链接仅右键新标签页可打开 左键点击失效求助

核心错误点 #

• target属性写法完全颠倒
  新窗口打开的正确属性写法是target="_blank"，你的代码将下划线写在了属性名上、值只写了blank，完全不符合规范。右键新标签页打开会直接读取最终绑定的href属性跳转，不受target错误影响；但左键点击时浏览器识别到错误的target配置，叠加初始写的href="#"会默认跳转到当前页锚点，看上去就像没有触发跳转。
• text绑定表达式语法错误
  你代码中的text绑定text: Text on top of url没有用引号包裹静态文本，Knockout会将其识别为JS表达式解析，直接抛出语法错误，导致整个a标签的绑定逻辑执行异常，也是左键点击失效的核心原因。如果要显示静态文本需要加单引号包裹，绑定动态值请替换为对应上下文的正确变量名。
• HTML标签未闭合
  代码中的<a>标签没有写对应的闭合标签</a>，直接接了父元素的</div>，会导致浏览器解析DOM结构异常，部分浏览器会判定a标签的跳转逻辑失效。
• （可选排查项）如果修复上述问题后仍异常，检查全局或父级元素（你使用的kgCellText是Knockout Grid的默认单元格类，该组件默认会绑定单元格点击事件）是否有调用event.preventDefault()阻止了a标签的默认跳转行为。

修复后代码示例 #

<div data-bind="attr: { 'class': 'kgCellText colt' + $index()}">
    <!-- 静态文本写法 -->
    <a data-bind="attr: {'href': $url, 'target': '_blank'}, text: 'Text on top of url'"></a>
    <!-- 动态变量写法替换为对应变量即可
    <a data-bind="attr: {'href': $url, 'target': '_blank'}, text: Text"></a>
    -->
</div>

内容的提问来源于stack exchange，提问作者Wella