javascript - 在 Windows 8 Metro 的 javascript 中使用图像作为超链接

Question

在我的 home.html 中我有:

<a href="/pages/page2/page2.html">Go to page2</a>

由 home.js 处理:

WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

和 linkClickEventHandler 定义:

function linkClickEventHandler(eventInfo)
{
   eventInfo.preventDefault();
   var link = eventInfo.target;
   WinJS.Navigation.navigate(link.href);
}

如您所见，我正在覆盖 <a> 的行为使用页面控制导航而不是普通的 HTML 导航。

当单击“转到 page2”时，它成功地将页面控件从 home.html 更改为 page2.html

现在，如果我想在 <a> 中使用图像，而不只是文本“转到第 2 页”，该怎么办？标签:

<a href="/pages/page2/page2.html"><img src="page2.png" /></a>

这似乎不起作用。我已经加载并显示了图像，但是当我单击它时，它似乎尝试以文本格式显示图像，因为页面控件更改为一些充满未知(方形)字符的垃圾文本，这些字符以“PNG”开头。 .. PHOTOSHOP...”(我使用 Photoshop 来创建图像)

我还尝试添加:

WinJS.Utilities.query("img").listen("click", linkClickEventHandler, false);

但它没有做任何事情

Answer 1

使用这个:

var link = eventInfo.currentTarget;

...相反。看，eventInfo.currentTarget 之间有一个微妙但重要的区别。和eventInfo.target (引用the doc):

The target property returns the element that originally received an event. However, the currentTarget property returns the element that the event handlers are being processed for during the capturing and bubbling phases.

该错误是由 eventInfo.target 引起的是一个图像元素，而不是一个链接元素。 )从技术上看，click事件首先发生在 <img src... /> 内;最终它到达了外部<a href="...">元素(所谓的 bubbling )，但其原始目标(= eventInfo.target)仍然相同!因此，您的脚本实际上导航到 src 中指定的 URL。图像的属性(作为其 href 属性值)。