Question

I am developing an app in Metro using HTML+Javascript. My links are not working when they are used to create a link in a img tag:

<h4><a href="/pages/childpage.html">Go to child page</a></h4>
<a href="/pages/childpage.html"><img src="/images/home/child.jpg" /></a>

The first link works OK and the second does not. When I click the image, it blocks the app.

For the links, I’m using a Application.PageControlNavigator as suggested in the documentation. My JS has:

(function () {
   "use strict"; 

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

   WinJS.UI.Pages.define("/pages/home/home.html", {
       ready: function (element, options) {
           WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);
           WinJS.UI.processAll();
       }
   });
})();

Answer 1

The problem is that the link.href returns the src string instead of the href string when having the tag used inside the tag . In your case the link.href returns “/images/home/child.jpg”. I asssume this is a bug and not a feature. The workaround is not to use the href.link.