8

我正在开发一个使用淘汰赛 js 的新项目。我设置了一个小表格，显示输入到填充可观察数组的表单中的图像和信息。我有用锚（链接）标签包裹的图像，我通过 KO 数据绑定在 href 中提供。见下文。

<a data-bind="attr: {href: imgUrl}" target="_blank"><img class="imgThumb" data-bind="attr: {src: imgUrl}"/></a>

所有这些都按预期显示，但是没有一个链接会真正点击到图像位置。

数组条目如下所示：

col1: 'Bert', col2: 'Muppet', col3: 'Sesame Street', imgUrl: 'http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg'

呈现的 HTML 如下所示：

<a data-bind="attr: {href: imgUrl}}" target="_blank" href="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"><img class="imgThumb" data-bind="attr: {src: imgUrl}" src="http://images3.wikia.nocookie.net/__cb20101210195428/muppet/images/4/40/Bert1970s.jpg"></a>

再一次，我的链接都不起作用，他们不会像我期望的那样点击到图像位置。任何人都可以在这里帮助我并指出我所缺少的。另外，值得注意的是，我也尝试过添加 a click: function(){ return true; }，但这也无济于事。提前致谢，可以在此处找到演示：http: //dev.voidbase.com/working.html

4

1 回答 1

13

你在正确的轨道上

另外，值得注意的是，我也尝试过添加 a click: function(){ return true; }，但这也无济于事。

但它本身click: function(){ return true; }是不够的，因为click事件仍然会冒泡，因此您需要使用该clickBubble: false选项（另请参见文档中的）：

<a target="_blank" data-bind="attr: {href: imgUrl}, 
      click: function() { return true;}, clickBubble: false">
    <img class="imgThumb" data-bind="attr: {src: imgUrl}"/>
</a>

演示JSFiddle。

顺便说一句，您对 body 元素的点击绑定“窃取”了您的点击事件：<body style="padding-top: 100px;" data-bind="click: modalKiller">. 因此，如果true从您的modalKiller处理程序返回，它也可以解决您的问题。

于 2013-08-24T08:01:20.027 回答